一、webStorage
1.存储内容大小一般支持5MB左右（不同浏览器可能不一样）。
2.浏览器通过Window.sessionStorage 和 Window.localStorage属性来实现本地存储机制。
3.相关API:
(1).xxxxStorage.setItem('Key','value')：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
(2).xxxxStorage.getItem('person')：该方法接受一个键名作为参数，返回键名对应的值。
(3).xxxxStorage.removeItem('Key')：该方法接受一个键名作为参数，并把该键名从存储中删除。
(4).xxxxStorage.clear()：该方法会清空存储中的所有数据。
4.备注：
(1).sessionStorage存储的内容会随着浏览器窗口关闭而消失。
(2).localStorage存储的内容，需要手动清除才会消失。
(3).xxxxStorage.getItem('xxx')如果对应的value获取不到，那么getItem的返回值是null。
(4).JSON.parse(null)的结果依然是null。
/* localStorage */
<body>
<h1>localStorage</h1>
<button onclick="saveData()">点我存储一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清除一个数据</button>
<script>
let obj ={name:'张三',age:18}
function saveData(){
console.log(1)
localStorage.setItem('msg','你好')
localStorage.setItem('msg2','localStorage')
localStorage.setItem('person',JSON.stringify(obj))
}
function readData(){
console.log(localStorage.getItem('msg'))
console.log(localStorage.getItem('msg2'))
let e = localStorage.getItem('person')
console.log(JSON.parse(e))
}
function deleteData(){
localStorage.removeItem('msg')
}
function deleteAllData(){
localStorage.clear()
}
</script>
</body>
/* sessionStorage */
<body>
<h1>sessionStorage</h1>
<button onclick="saveData()">点我存储一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清除一个数据</button>
<script>
let obj ={name:'张三',age:18}
function saveData(){
console.log(1)
sessionStorage.setItem('msg','你好')
sessionStorage.setItem('msg2','localStorage')
sessionStorage.setItem('person',JSON.stringify(obj))
}
function readData(){
console.log(sessionStorage.getItem('msg'))
console.log(sessionStorage.getItem('msg2'))
let e = sessionStorage.getItem('person')
console.log(JSON.parse(e))
}
function deleteData(){
sessionStorage.removeItem('msg')
}
function deleteAllData(){
sessionStorage.clear()
}
</script>
</body>二、TodoList_本地存储
利用localStorage.setItem 和 localStorage.getItem的存储和读取机制来动态存储TodoList的数据。通过watch监视todoList数据的变动，每当数组修改，就会用新的数组覆盖掉浏览器本地存储中的旧数组。
<template>
<div class="centent">
<Add
:addTodo="addTodo"
/>
<todoList
:todoList="todoList"
:todoDelete="todoDelete"
:itemCheckChange="itemCheckChange"
/>
<allTodo
:todoList="todoList"
:allTodoDelete="allTodoDelete"
:toggleAll="toggleAll"
/>
</div>
</template>
<script>
import Add from './Components/Add.vue'
import todoList from './Components/todoList.vue';
import {nanoid} from 'nanoid'
import allTodo from './Components/allTodo.vue';
export default {
name:'App',
data() {
return {
todoList: JSON.parse(localStorage.getItem('todoList')) || []
}
},
components:{Add,todoList,allTodo},
methods:{
addTodo(x){
if(x.text.trim()){
this.todoList.unshift(x)
}
},
allTodoDelete(){
this.todoList = this.todoList.filter(item => !item.is_check)
},
todoDelete(id){
this.todoList = this.todoList.filter(item=>item.id!=id)
},
itemCheckChange(id){
this.todoList.forEach(item=>{
if(item.id === id) item.is_check =!item.is_check
})
},
toggleAll(value){
this.todoList.forEach(item => {
item.is_check=value
})
}
},
watch:{
todoList:{
deep:true,
handler(value){
localStorage.setItem('todoList',JSON.stringify(value))
}
}
}
}
</script>
<style scoped>
.centent{
width: 400px;
margin: auto;
border: 1px solid #000;
min-height: 50px;
padding: 20px;
}
</style>