HTML5的LocalStorage本地存储

HTML5提供了两种在客户端存储数据的方法

• localStorage 没有时间限制的数据存储
• sessionStorage 针对一个session的数据存储

localStorage的优势

1. localStorage拓展了cookie的4k限制
2. localStorage会可以将第一次请求的数据直接存储到本地。

localStorage的局限

1. 浏览器的版本不统一，只有在高版本浏览器才支持localStorage属性。
2. 所有的浏览器中都会把localStorage的值类型限定为字符串类型，常见的JSON对象类型需要转换。
3. localStorage在浏览器的隐私模式下是不可读取的。
4. localStorage本质上是对字符串的读取，如果存储内容多，就会消耗内存空间，导致页面变卡。
5. localStorage不能被爬虫抓取到localStorage与sessionStorage的区别就是localStorage属于永久性存储，而sessionStorage属于会话结束，sessionStorage中的键值对就会被清空。
6. localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage。

 

localStorage的使用

设置值

//方法一：localStorage.setItem(key,value);  如果key存在，则是更新value
localStorage.setItem("name","jack");
//方法二
localStorage.name="jack";
//方法三
localStorage["name"]="jack";

获取值

//方法一 localStorage.getItem(key,value); 如果key不存在，则返回null
var name=localStorage.getItem("name");
//方法二
var name=localStorage.name;
//方法三
var name=localStorage["name"];

删除值

//方法一 localStorage.remove(key) 清除单项key的值
localStorage.remove("name");
//方法二 localStorage.clear() 清除localStorage存储的所有数据
localStorage.clear();

遍历存储的数据

for(var i=0;i<localStorage.length;i++){
     document.write(localStorage.key(i)+":"+localStorage.getItem(localStorage.key(i))+"<br/>");
}
// localStorage.length：本地存储数据的总量
// localStorage.key(i)：获取第i个数据的key
// localStorage.getItem(localStorage.key(i))：获取第i个数据的value

JSON存储

当存储之前需将JSON对象转换为JSON字符串；而获取之后需将JSON字符串转换为JSON对象。

• JSON.stringify(data);  将对象转换成JSON格式的字符串
• JSON.parse(data);  将数据转换成JSON对象

//存储之前需将json对象转换为json字符串
var jsonObj={"name":"jack","age":"20"};
var jsonStr=JSON.stringify(jsonObj);
localStorage.setItem("user",jsonStr);

//获取之后需将json字符串转换为json对象
var jsonStr=localStorage.getItem("user");
var jsonObj=JSON.parse(jsonStr);

兼容性