localstorage空值问题

发表于   |   分类于   |   阅读次数

今天在使用localstorage处理继续制作的时候，偶然遇到一个问题，在此进行记录。

localstorage 简单介绍

在接触localstorage前，大部分人在需要进行本地存储一些数据时，常常会使用cookie进行存储，简单易用，兼容各种浏览器。而cookie也有它的局限存在：上限4K大小。而localstorage支持5M大小上限，很大的提升了存储的空间。IE8以上也都支持了，基本满足我们对浏览器的需求。

使用方法：

一言不合，上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
//存值
localStorage.lastname="Smith";
localStorage.setItem("lastname","Smith");
//取值
var lastname = localStorage.lastname;
var lastname = localStorage.getItem("lastname");
//删除值
localStorage.removeItem("lastname");
//清空
localStorage.clear();

问题

在存储过程中，localStorage会自动将存储的内容转为字符串形式，比如：

1.数组

1
2
3
4
5
6
7
localStorage.setItem("arr", [1,2,3]);
var arr = localStorage.getItem("arr");
//arr自动转为字符串形式
console.log(arr) // => "1,2,3"
console.log( typeof(arr) ) // => "string"

2.对象

1
2
3
4
5
6
localStorage.setItem("obj", { a: 1 });
var obj = localStorage.getItem("obj");
//obj自动转为字符串形式,而不是对象
console.log(obj) // => "[object Object]"

3.null,undefined

1
2
3
4
5
6
7
8
9
localStorage.setItem("null", null);
localStorage.setItem("undefined", undefined);
var a = localStorage.getItem("null");
var b = localStorage.getItem("undefined");
//自动转为字符串形式
console.log(a) // => "null"
console.log(b) // => "undefined"

因此，我们在对对象等进行存储时，首先需要将期进行JSON.stringify(),取出后再转成json对象。方便操作。

而对于null等值，经常会遇到这种问题，我们进行非空判断等，常常会进行bool运算，typeof等类型判断来验证是否非空，但是从localStorage取出的值都为字符串类型，bool和typeof都会与正常的null,undefined结果不一样，因此我们对此中值建议做以下处理：

null,undefined => ‘’

没错，将null,undefined等按照’’进行存储， 而’’的bool运算结果为false,刚好达到我们的需求。