当前位置：首页 > news >正文

localStorage小结

news 来源：原创 2024/5/4 14:48:22

使用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);
 }