HTML5 Web存储

HTML5 Web存储，一个比cookie更好用的方法

什么是 HTML5 Web 存储?

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

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

浏览器支持

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

注意:Internet Explorer 7 及更早IE版本不支持web 存储.

localStorage和sessionStorage

客户端存储数据的两个对象为：

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

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

在使用web存储前，应检查浏览器是否支持localStorage和sessionStorage

if(typeof(Storage) !== "undefined"){ //支持的代码 } else { //sorry，不支持 };

localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

实例：

localStorage.sitename="菜鸟教程";

document.getElementById("result").innerHTML="网站名："+localStorage.sitename;

实例解析：

使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。

检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。

不管是localStorage，还是sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）

1、保存数据 ： localStorage.setItem(key,value);

2、读取数据 ： localStorage.getItem(key);

3、删除单个数据 ： localStorage.removeItem(key);

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

5、得到某个索引的key ： localStorage.key(index);

sessionStorage对象

sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

webstorage和cookie的区别

WebStorage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，WebStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而WebStorage仅仅是为了在本地“存储”数据而生。