HTML5 Web存储

引言：

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

　　localStorage - 没有时间限制的数据存储

　　sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。

它使在不影响网站性能的情况下存储大量数据成为可能。 对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

 

 

 

localStorage对象:

数据的存储没有时间限制

 

localStorage对象存储的方式

//存储
localStorage.setItem("name","zhangsan");

其中，"name" 为键，”zhangsan“为值，将值”zhangsan“保存到键”name“中

 

取值的方式

//取值
localStorage.getItem("name");

通过键的值  来取到存储的值。

 

其它常用方法：

 

1.删除单个数据：

localStorage.removeItem(key);

 

2.删除所有数据： localStorage.clear();

 

3.得到某个索引的key：

localStorage.key(index);

 

 

 

sessionStorage用法与localStorage用法相同

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

用localStorage与sessionStorage存储数组与对象

 

将数据存储到localStorage与sessionStorage中有以下优点：

1）数据进行缓存

2）减少内存的占用

 

但是，storage只能存储字符串类型的数据，JavaScript中常用的数组和对象不能够存储

可以通过JSON对象提供的parse() 和stringif()方法转为字符串，然后再存储到storage中。

var obj={
    "name":zhangsan,
    "age":14,
    "sex":"nan"
}

var str=JSON.stringify(obj);

//存储
localStorage.setItem("info",str);

//读取
str=localStorage.get("info");


//重新转换为对象

obj=JSON.parse(str);