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

原创

无量测试之道 2022-09-01 22:00:31 ©著作权

文章标签 Vue.js 数据 json 本地存储 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者无量测试之道的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

前期分享的 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 串的形式存储到浏览器本地。

总结

浏览器存储内容大小一般支持 5MB 左右（不同类型的浏览器可能还不一样）。
在使用时可依据存储数量的大小酌情考虑是否使用浏览器本地存储。
浏览器端通过Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
核心API:

这里的XXX代表：session 或 local。

XXXStorage.setItem('key','value');该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
XXXStorage.getItem('todo');该方法接受一个键名作为参数，返回键名对应的值。
XXXStorage.removeItem('key');该方法接受一个键名作为参数，并把该键名从存储中删除。
XXXStorage.clear();该方法会清空存储中的所有数据。
在 todoList 项目案例中只用到了getItem()和setItem()两个API。