Vue

2024-07-08 00:28| 来源: 网络整理| 查看: 265

html 的localStroage 可以将用户输入的信息存储在本地浏览器中在控制台输入：window 可以看到window对象的属性和方法

//设置localStroage值 localStorage.setItem（'username','zhangsan'）; //获取localStroage值 localStorage.getItem（'username'）; ==>zhangsan

输入localStorage.setItem（“username”,’zhangsan’）敲回车就可以将该key值为username，value值为zhangsan的信息存储在本地了。可以在Application中的LocalStorage中查看 eg: 这里写图片描述现在在Vue中建立一个localStorage的文件来存储我们输入的信息在src文件下建立一个localstorage的文件，在里面写两个方法：

const STORAGE_KEY = 'todos-vuejs' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)) } }

然后在APP.vue中引入该model：

import localStore from './localstorage.js'

添加一个watch 监控：当items的数据发生变化的时候，将改变后的值放在本地存储。

watch:{ items:{ handler:function(items){ localStore.save(items) }, deep:true } } //这一步将items变化之后的值都存在了localStorage之中

这里写图片描述 items的值直接从localstorage 中取，这样刷新值就不会被清空了,刷新数据不会丢失。

data(){ return{ items:localStore.fetch(), } }

【本文地址】

公司简介

联系我们