localStorage小结

时间：2020-12-03 16:12:34

使用HTML5可以在本地存储用户的浏览数据。。　

什么是 HTML5 Web 存储?

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

目前所有的浏览器中都会把localStorage的值类型限定为string类型，非字符串的数据在存储之前会被转换成字符串，所以对JSON对象等类型需要做一些转换。数据以键/值对的形式存在, localStorage和sessionStorage的使用也是遵循同源策略的，所以不同的网站之间是不能共用相同的localStorage或者sessionStorage。

localStorage与sessionStorage的区别

localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。

可以认为localStorage或者sessionStorage相当于一个前端的数据库，数据库主要是增删查改这四个步骤。

以localStorage为例来说明相关的操作：

增：

var storage=window.localStorage;

//方法一

storage["a"]=1;

//方法二

storage.a=1;

//方法三

storage.setItem("a",1);

建议使用方法而不是属性来访问数据，以免某个键会意外重写该对象上已经存在的成员。

删：

1、将localStorage的所有内容清除

var storage=window.localStorage;

storage.setItem("a",1);

storage.setItem("b",2);

storage.clear();

console.log(storage);

2、 将localStorage中的某个键值对删除

var storage=window.localStorage;

storage.setItem("a",1);

storage.setItem("b",2);

storage.removeItem("a");

console.log(storage.a);

查：

var storage=window.localStorage;

//方法一

var a=storage.a；

//方法二

var b=storage["a"];

//方法三

var c=storage.getItem("a");

改：

与增相同，遵循“同名覆盖”的原则即键相同，则覆盖。

localStorage键的获取

可以通过结合length属性和key方法来迭代localStorag的值。如下：

var storage = window.localStorage;

storage.setItem('a',1);

storage.setItem('b',2);

storage.setItem('c',3);

for(var i=0,len=storage.length;i<len;i++){

     var key = storage.key(i);

     var value = storage.getItem(key);

     console.log(key + "=" + value);

 }

使用localStorage存储json对象时，可以先通过JSON.stringify()这个方法，来将JSON转换成为JSON字符串，然后保存到localStorage中。

读取JSON字符串之后可以使用JSON.parse()方法将JSON字符串转换成为JSON对象。

相关文章