Vue webStorage 浏览器本地存储数据（附项目实战案例！）

前言

前期分享的 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】

公众号后台回复：todo，即可获得项目完整源码

基础数据是硬编码在代码里的，相当于是写死在代码中，具体代码内容如下（核心代码片段）。

App.vue文件

export default {
    //给当前组件命名为:App
    name:'App',
    //注册引入的子组件
    components:{ListHeader, AllList, ListFooter},
    //初始化的todo list数据
    data(){
        return {
            todos:[
                {id:'001', title:'读文学书', done:true},
                {id:'002', title:'解函数', done:false},
                {id:'003', title:'上瑜珈课', done:false},
                {id:'004', title:'研究三角函数', done:false},

            ]
        }
    }
}

这种硬编码的初始化数据会导致一个问题是每次只要浏览器刷新，新增的 todo 待办事项就会消失，这种体验是非常糟糕的。

方案思考

大家思考一下，有哪些方法可以解决这个问题呢？（暂时不考虑后端的数据库存储哈~）

今天的分享主要是给大家推荐了一种解决方法，即：使用 webStorage 浏览器本地存储，这种数据存储方式可以完美解决上述所讨论的问题。

但也存在一定的缺陷，例如：

• 清除浏览器缓存
• 手动删除本地存储空间

这两种清除浏览器数据的行为，都会导致使用 webStorage 核心API 写入的数据被清除掉，再次刷新浏览器时，数据为空。

如果是测试工具的开发，这种解决方法还是行之有效的，毕竟不会频繁地没事就清除浏览器缓存的。

优化方案实现

以下是使用 webStorage 的核心API 实现的解决方法。

App.vue文件

export default {
    //给当前组件命名为:App
    name:'App',
    //注册引入的子组件
    components:{ListHeader, AllList, ListFooter},
    data(){
        return {
            todos:JSON.parse(localStorage.getItem('todos')) || []
        }
    },
    //监视todos的变化，有更新则更新浏览器本地存储的数据
    watch: {
        todos:{
          //深度监视:当todo中一个对象的某个键值对发生改变时也能被监视到
            deep:true,
            handler(value){
                localStorage.setItem('todos',JSON.stringify(value))
            }
        }
   }   
}

优化方案中使用了 localStorage.getItem('key'), localStorage.setItem('key','value') 这两个 API 来完成浏览器本地数据的写入与读取，替换掉了硬编码的初始化数据。

JSON.stringify(value)是在写入数据时，以 JSON 串的形式存储到浏览器本地。

总结

1. 浏览器存储内容大小一般支持 5MB 左右（不同类型的浏览器可能还不一样）。

   在使用时可依据存储数量的大小酌情考虑是否使用浏览器本地存储。

2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3. 核心API:

这里的XXX代表：session 或 local。

• XXXStorage.setItem('key','value');

  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

• XXXStorage.getItem('todo');

  该方法接受一个键名作为参数，返回键名对应的值。

• XXXStorage.removeItem('key');

  该方法接受一个键名作为参数，并把该键名从存储中删除。

• XXXStorage.clear();

  该方法会清空存储中的所有数据。

  在 todoList 项目案例中只用到了getItem()和setItem()两个API。

4. 特别说明：

• SessionStorage 存储的内容会随着浏览器窗口关闭而消失。

• LocalStorage 存储的内容，需要手动清除才会消失。

• XXXStorage.getItem(key) 如果 key 对应的 value 获取不到，那么 getItem的返回值是 null。

• JSON.parse(null) 的结果依然是 null。

建议大家将本次分享中优化后的代码片段替换原代码文件片段，再使用npm run serve重启服务，亲自实践感受下浏览器刷新是否还会丢失新增的 todo 数据。

本文由mdnice多平台发布