Vue webStorage 浏览器本地存储数据(附项目实战案例!)

互联网 2022/6/28 23:24:09

前言 前期分享的 200行纯前端Vue代码!教你写一个专属TodoList【零基础友好】公众号后台回复:todo,即可获得项目完整源码基础数据是硬编码在代码里的,相当于是写死在代码中,具体代码内容如下(核心代码片段)。 App.vue文件 export default {//给当前组件命名为:Appna…

前言

前期分享的 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.sessionStorageWindow.localStorage 属性来实现本地存储机制。

  3. 核心API:

这里的XXX代表:session 或 local。

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

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

  • XXXStorage.getItem('todo');

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

  • XXXStorage.removeItem('key');

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

  • XXXStorage.clear();

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

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

  1. 特别说明:
  • SessionStorage 存储的内容会随着浏览器窗口关闭而消失。

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

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

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

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

本文由mdnice多平台发布

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[Vue webStorage 浏览器本地存储数据(附项目实战案例!)]http://www.zyiz.net/tech/detail-331641.html

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>