vue前端缓存方法有哪些,vue组件缓存方式
本文主要介绍关于Vue缓存方法的相关信息，通过示例代码进行了非常详细的介绍，对大家的学习或者工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
最近提出了一个新的要求“前端缓存”。
背景：为了解决表单重复填写频率高的问题，要求打开页面，自动填写上次输入的数据。数据保存期为一周(有效期为7天)。
谈到缓存，首先想到的是localstorage和sessionStorage。
sessionStorage
也称为会话缓存，当用户关闭浏览器窗口时，数据会被删除；
sessionStorage.setItem(key ， value )；//存储
session storage . getitems( key )；//按获取值。
session storage . remove items( key )；//按键单独删除
session storage . clear()；//删除所有数据
sessionStorage.length//获取数据量
session storage . value of()；//获取所有值
localstorage
存储的数据没有时间限制，只要不被删除，就会存在。
localstorage.setItem(key ， value )；//保存数据
local storage . getitem( key )；//读取数据
localstorage.removeItem(key ，)；//删除单个数据
local storage . clear()；//删除所有数据
localstorage.key(索引)；//获取索引的键
而value必须是字符串，web存储的API只能对字符串进行操作。
由于sessionStorage browser的关闭窗口数据会被清空，不适用我想开发的需求。如果只考虑这两种方案的话，似乎localstorage会相对合适一些，但是如果使用localstorage，并且设置了时间限制的话，从代码层面来说会比较麻烦。
localstorage具体实现思路
1. 存储数据时加上时间戳
当数据较大时，可以使用localstorage，存储数据时写一个时间，获取时与当前时间进行比较。
在项目开发中，我们可以编写一个通用的方法，用时间戳来存储它。
导出函数setLocalStorageAndTime (key，value) {
window . local storage . setitem(key，JSON.stringify({ data: value，time: new Date()。getTime() }))
}
项目申请
Setlocalstorageandtime (XXX ，{name: XXX})用于数据重新存储
2.将数据与当前时间进行比较。
导出函数getLocalStorageAndTime (key，exp=86400000) {
//获取数据
let data=window . local storage . getitem(key)
如果(！数据)返回空值
let dataObj=JSON.parse(data)
//与到期时间进行比较
if(新日期()。getTime() - dataObj.time exp) {
//过期删除返回null
removeLocalStorage(键)
Console.log(“信息已过期”)
返回null
}否则{
返回dataObj.data
}
}
程序员最大的特点就是懒。如果有外挂，绝对不会放过。如果他们能CV，绝对不会敲打他们。因为写起来太复杂，我果断放弃使用localstorage，寻找更简单方便的方法。通过同事的推荐最终选择了Vue.ls，下面就来介绍一下Vue.ls。
Vue.ls
一种Vue包的本地存储方法。Vue插件，用来从Vue上下文中使用本地存储、会话存储、内存存储，简单易用，Api描述比较全面。
安装
新公共管理理论
npm安装vue-ls -保存
故事
纱线添加vue-ls
使用
Vue-ls存储API
从“vue-ls”导入存储；
选项={
命名空间： vuejs__ ，//关键字前缀
Name: ls ，//命名Vue变量。或者这个。[$ls]，
Storage: local ，//存储名称：会话，本地，内存
};
Vue.use(存储、选项)；
//或者Vue.use(存储)；
新Vue({
埃尔： #app ，
已安装：函数(){
Vue.ls.set(foo ， boo )；
//设置有效期
Vue.ls.set(foo ， boo ，60 * 60 * 1000)；//有效期为1小时
vue . ls . get( foo )；
Vue.ls.get(boo ，10)；//如果没有设置boo，则返回默认值10
let callback=(val，oldVal，uri)={
console . log( local storage change ，val)；
}
Vue.ls.on(foo ，callback) //检测foo键的变化并触发回调
Vue.ls.off(foo ，回调)//不调查
vue . ls . remove( foo )；//移除
}
});
Global(全局)
Vue.ls
Context（上下文）
这个。$ls
API 说明
Vue.ls.get(名称，定义)
返回存储中的名称值。在返回之前在JSON中内部解析该值。
Def:默认值为null，如果设置了，则返回名称。
Vue.ls.set(名称，值，过期)
设置存储中name的值。并将值转换成JSON。
Expire:默认值为null，name name的有效时间以毫秒为单位。
Vue.ls.remove(名称)
从存储中删除名称。成功移除true，否则返回false。
Vue.ls.clear()
清空存储。
Vue.ls.on(名称，回拨)
持续监控其他标签上名称的变化，变化时触发回调，传递以下参数：
NewValue:当前存储中的名称，从持久性JSON中解析
OldValue:旧存储中的名称，从持久性JSON中解析
Url:从选项卡中修改URL
Vue.ls.off(名称，回拨)
删除上一个监听器Vue.ls.on(名称，回调)
实操
存储：以键值对的形式，最后一个参数是有效期。
值：该参数是存储的键。
查看：可以在本地存储中查看存储的数据
总结
localstorage以文件的形式存储在本地，永久保存；Sessionstorage(会话存储)用于临时存储；Vue.ls是Vue包的本地存储方式，简单方便易用。LocalStorage和sessionStorage只能存储字符串类型，复杂的对象可以通过ECMAScript提供的stringify和JSON对象的parse来处理。
这就是这篇关于Vue缓存方法的文章。有关Vue缓存方法的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。