Vue 浏览器本地存储
一、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>