web页面本地存储优化-保留数据类型

本地存储的不足

使用localStorage存入一个数字5

localStorage.setItem('num',5);

再从localStorage中取出时

let num = localStorage.getItem('num');
console.log(typeof num);
// string

可以看到在本地存入的数字5，取出时则转成了字符串5，这不是想要的结果。
相应的，如果存入一个布尔值，那么取出时也会变成字符串。

优化本地存储

首先，存储一个数字10

let num = 10;
let obj = {value:num};
let objStr = JSON.stringify(obj);
localStorage.setItem('num',objStr);

然后再取出数字10

let objStr = localStorage.getItem('num');
let obj = JSON.parse(objStr);
let num = obj.value;
console.log(typeof num);

这样我们就能拿到数字10，而不是字符串10

总结

步骤：在存入数字的时候，将数字放在一个对象中，并存储使用JSON.stringify该对象的字符串；取出时先取出这个对象字符串再使用JSON.parse解析，最后获取我们存的值。
原理：JSON在转换数据时会保留数据的类型。