#|vue-vue2脚手架6-浏览器本地存储webStorage vue.js|前端|javascript|vue2脚手架

vue-vue2脚手架6-浏览器本地存储

其实这边不借助vue就能实现本地存储功能， js有这种功能1. 组件化编码流程：? (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。? (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：?1).一个组件在用：放在组件自身即可。?2). 一些组件在用：放在他们共同的父组件上（状态提升）。? (3).实现交互：从绑定事件开始。 2. props适用于：? (1).父组件 ==> 子组件通信? (2).子组件 ==> 父组件通信（要求父先给子一个函数）3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

webStorage

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
【#|vue-vue2脚手架6-浏览器本地存储webStorage】浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：
1. xxxxxStorage.setItem('key', 'value');
  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage.getItem('person');
  ? 该方法接受一个键名作为参数，返回键名对应的值。
3. xxxxxStorage.removeItem('key');
  ? 该方法接受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
  ? 该方法会清空存储中的所有数据。
备注：
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
4. JSON.parse(null)的结果依然是null。

文章图片

localStorage实例，sessionStorage 同理

localStorage - 锐客网 localStorage type="text/javascript" > let p = {name:'张三',age:18}function saveData(){ localStorage.setItem('msg','hello!!!') localStorage.setItem('msg2',666) localStorage.setItem('person',JSON.stringify(p)) } function readData(){ console.log(localStorage.getItem('msg')) console.log(localStorage.getItem('msg2'))const result = localStorage.getItem('person') console.log(JSON.parse(result))// console.log(localStorage.getItem('msg3')) } function deleteData(){ localStorage.removeItem('msg2') } function deleteAllData(){ localStorage.clear() }

关于todolist的存储

可以使用watch 监听方法来实现该功能

这里是要开启深度监听的，如果watch监听到事件改变了，vue是无法监听到地址值的改变，所以要开启 deep:true,

> import MyHeader from './components/MyHeader' import MyList from './components/MyList' import MyFooter from './components/MyFooter.vue' export default { name:'App', components:{MyHeader,MyList,MyFooter}, data() { return { //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升） todos:JSON.parse(localStorage.getItem('todos')) || [] } }, methods: { //添加一个todo addTodo(todoObj){ this.todos.unshift(todoObj) }, //勾选or取消勾选一个todo checkTodo(id){ this.todos.forEach((todo)=>{ if(todo.id === id) todo.done = !todo.done }) }, //删除一个todo deleteTodo(id){ this.todos = this.todos.filter( todo => todo.id !== id ) }, //全选or取消全选 checkAllTodo(done){ this.todos.forEach((todo)=>{ todo.done = done }) }, //清除所有已经完成的todo clearAllTodo(){ this.todos = this.todos.filter((todo)=>{ return !todo.done }) } }, watch: { todos:{ // 开启深度监听 deep:true, handler(value){ localStorage.setItem('todos',JSON.stringify(value)) } } }, }