vue中 localStorage的使用方法（详解）

Posted 2022-08-23 张铎（信念）

vue中实现本地储存的方法：localStorage，在html5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

(1)  储存数据   两种方式

方式一：

localStorage.setItem('userName', '张三')；

方式二：

localStorage.userName="张三"；

(2).取出数据 两种方式

方式一：

localStorage.getItem('userName');

方式二：

var username = localStorage.userName

(3).删除储存数据

 localStorage.removeItem('userName')

(4) localStorage 中数值加1  需要用parseInt转换

localStorage.num =1;
parseInt(localStorage.num) + 1;

（5）localStorage中数组的使用

let arr = ['泰迪','柯基','金毛']
// 存
localStorage.setItem('ARR', JSON.stringify(arr))
// 取
arr = JSON.parse(localStorage.getItem('ARR')）

使用时有两点需要注意过的地方：

• localStorage在浏览器的隐私模式下面是不可读取的。
• localStorage本质上是对字符串的读取，有json格式时需要JSON.stringify()转化为字符串。
• localStorage不能被爬虫抓取到