vuex localstorage,vue storage
本文主要介绍了基于localStorage的Vue信息存储代码实例。文中详细介绍了示例代码，对大家的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
一 什么是localStorage
对于浏览器来说，使用Web存储来存储键值比存储Cookie更直观，容量也更大。它包括两种类型：localStorage和sessionStorage。
SessionStorage:为每个数据源维护一个存储区域，它存在于浏览器打开期间，包括页面重载。
LocalStorage:与sessionStorage相同，但在浏览器关闭后，数据仍将存在。
所以最后一次用cookie的时候遇到了坑。设置后立即访问session时无法获取。很疼，我需要刷新一下。原因是：
当我们第一次访问设置了cookie的页面时，服务器会通过响应头发送设置的cookie值，告知浏览器将cookie存储在对应的本地文件夹中(注意：第一次访问时cookie没有存储在本地，所以此时无法获取该值)；
当您第二次访问时(或cookie设置后过期前的所有访问)，您将始终在请求头信息中携带Cookie值。(百度到了，还没看透彻，就先搬到这里了)。二。如何使用。
注意：sessionStorage和localStorage的用法基本相同，引用类型的值要转换成JSON，这里只列出localStorage。
1保存
//对象
const info={姓名： 侯，年龄：24，身份证： 001 }；
//字符串
const str=哈哈；
localStorage.setItem(hou ，JSON . stringify(info))；
localStorage.setItem(郑，str)；
2获取
var data1=JSON . parse(local storage . getitem( Hou )；
var data2=localStorage.getItem(郑)；
3删除
//删除某个
local storage . remove item( Hou )；
//全部删除
local storage . clear()；
4监控
存储更改(添加、更新、删除)时触发。同一页面的更改不会触发，只会监控同一域名下的其他页面更改存储。
window . addevent listener( storage ，函数(e) {
console.log(key ，e . key)；console.log(oldValue ，e . old value)；
console.log(newValue ，e . new value)；console.log(url ，e . URL)；
})
5在浏览器中查看
六
在vue中实践
根据我的需求是默认的。记住最后的选择很简单。
添加数据时，下次添加数据时默认记住我上次的选择。
因此，在添加或提交时存储值就足够了。
local storage . setitem( projectId ，me.workhourData.projectId ， me . work hourdata . project manager)；刚打开新页面就拿到了，只要判断不是空的就行。
//记住最后选择的审阅者
if(localStorage.length0){
var my data=local storage . getitem( projectId )；
如果(mydata！=null){
var arr3=mydata.split(，)；
if(arr 3[0]==me . work hourdata . projectid){
me . work hourdata . project manager=arr 3[1]；
}
}
}
注意7点
localStorage的有效期是永久的。一般浏览器可以存储5MB左右。SessionStorage api与localStorage相同。
存储的默认有效期是浏览器的sessionStorage(即标签页关闭后消失)。
localStorage作用域是协议、主机名和端口。(理论上不会人为删除，一直存在于设备中)
SessionStorage作用域是窗口、协议、主机名和端口。
知道这些知识点后，你的问题就很好解决了。
LocalStorage在窗口上。所以没必要写这个. localStorage如果这个是用vue写的，就是指vue实例。将报告一个错误
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。