小目标

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

使用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对象。

posted on 2017-10-10 16:26  自信哥  阅读(240)  评论(0编辑  收藏  举报