HTML5 localStorage 的使用

时间：2021-12-06 13:40:45
 

在前端开发中，我们会常遇到要在两个甚至多个html之间通信，我们可以在url中添加参数，但是当要传递的数据量较大较多时呢，不妨试试html5 的localStorage吧。

1) 检测你的浏览器是否支持localStorage：

            if(window.localStorage){

alert（'YES！'）；

} else alert('NO！');

2) 数据都是以键值对的形式存储在localStorage中的，使用时直接在window.localStorage中添加一个属性就可以了，定义和修改的示例如下：

//在window.localStorage添加一个test属性，并赋值test1的三种实现方式

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唯一的优点就是语法简单，但是性能并不是很好，能不用的时候尽量不用。

相关文章