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

数据存储的简介
  为了让用户操作的数据在下次打开网页时,依然能够显示,需要用到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 中使用

猜你喜欢

转载自blog.csdn.net/A_Bow/article/details/113799867