23-vue中 localStorage--存储信息的使用

最新推荐文章于 2022-11-16 10:25:59 发布

不许人间见秃头xbw

最新推荐文章于 2022-11-16 10:25:59 发布

阅读量261

点赞数

分类专栏： Vue尚硅谷学习旅程文章标签： vue.js vue

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/a_bow/article/details/113799867

版权

Vue尚硅谷学习旅程专栏收录该内容

44 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何利用localStorage在前端实现数据的持久化存储。通过在组件的data和watch中操作，当todos数据更新时，会自动将更新后的数据转化为JSON字符串并保存到localStorage中，以便下次打开网页时仍能显示。博客强调了存取时机、存储内容以及读取时机的重要性，并提供了具体的代码示例。

摘要由CSDN通过智能技术生成

数据存储的简介：
为了让用户操作的数据在下次打开网页时，依然能够显示，需要用到localStorage 来将数据储存到文件中。

使用localStorage应该考虑的问题：
使用localstorage, 需要考虑到存和读 : 存的时机存的东西存的地方读的时机

代码示例:

export default {
	   data() {
	     return {
	       //localStorage 中的 键值对 总是 转化为字符串的形式存来进行存储
	       // 从localStorage 中读取 todos
	       todos: JSON.parse(window.localStorage.getItem("todos_key") || "[]")
	     }
	   },
	   watch:{//监视
	     todos: {
	       deep:true,//深度监视
	       handler: function(value) {//value为最新的数据
	         // 监视了todos的数据更新； 将todos最新的值得json数据，保存到localStorage
	         window.localStorage.setItem("todos_key",JSON.stringify(value));
	       }
	     }
  }

注意:
应该在存储数据得组件中进行使用localStorage；获取最新数在watch(监视)里面
localStorage相关的使用，就在存储数据的组件中的data 和 watch 中使用