更多参考:
http://blog.csdn.net/a727911438/article/details/54290931
在前端开发中,我们会常遇到要在两个甚至多个html之间通信,我们可以在url中添加参数,但是当要传递的数据量较大较多时呢,不妨试试html5 的localStorage吧。
1) 检测你的浏览器是否支持localStorage:
if(window.localStorage){
alert('YES!');
} else alert('NO!');
2) 数据都是以键值对的形式存储在localStorage中的,使用时直接在window.localStorage中添加一个属性就可以了,定义和修改的示例如下:
//在window.localStorage添加一个test属性,并赋值test1的三种实现方式
var localStorage = window.localStorage;
localStorage.test = “test1”;
localStorage[“test”] = “test1”;
localStorage.setItem(“test”,”test1”);
//属性值得修改同其的定义方式一样
//属性值的获取
var test = localStorage.test;
var test = localStorage[“test”];
var test = localStorage.getItem(“test”);
//属性的删除
localStorage.removeItem(“test”);//清除属性test
localStorage.clear();//清除所有的属性
3) localStorage提供的key()和length可以方便的实现所有属性的数据遍历,例:
var storage = window.localStorage;
var key = “”;
for(var i = 0;I < storage.length;i++){
key = storage.key(i);
console.log(key + “ : ” + localStorage.getItem(key));
}
4)localStorage仅能存储这种key/value键值对形式的数据,如果我们要存储的数据量比较大那,可以试试把这些数据转化为json数据,作为value值存储进去。如:
//set the infomation
var json = {“name”:”echo”,”message”:”hello localStorage”,”id”:1};
localStorage.setItem(“info”,json);
//get the information
var info = localStorage.getItem(“info”);
info = eval(“(” + info + ”)”);
console.log(“name:”+info.name+” message:”+info.message);
5)如果你用html5 的canvas做开发,你可以把这个canvas的内容生成一个快照在另一个html中显示,如:
//普通canvas实现
var canvas = document.getElementById(“canvas”);
var url = canvas.toDataURL(“image/png”);
localStorage.setItem(“image”,url);
//如果你用webgl做3D开发,可这么实现
var url = renderer.domElement.toDataURL('image/png','name');
localStorage.setItem("image",url);
6)最后,localstorage唯一的优点就是语法简单,但是性能并不是很好,能不用的时候尽量不用。