Web存储（localStorage与sessionStorage）

本文原创地址链接：http://blog.csdn.net/zhou_xiao_cheng/article/details/53526842，未经博主允许不得转载。

基础概念

客户端存储的形式有多种，如cookie、Web数据库、离线Web应用、web存储等，有兴趣的可以自己去了解。其中，Web存储最初是作为HTML5标准的一部分被定义为API形式的，后面有人觉得HTML5实在是太庞大了，就将Web存储逐渐从HTML5中剥离，使之成为了一个独立的标准，该存储标准API包含了localStorage以及sessionStorage这两个对象。
支持该标准的浏览器在Window对象上定义了两个属性：localStorage与sessionStorage，这两个属性都代表着同一个对象：Storage，而这个Storage对象在使用上与普通的JavaScript对象是一样的。

存在目的

这个Web存储API存在的目的只有一个：让客户端（浏览器端）可以存储数据。

区别

localStorage与sessionStorage间的区别如下：
localStorage：除非人为地删除，否则存储的数据被永久保存在本地。
sessionStorage：存储的数据仅在浏览器的一次会话中有效，当结束会话（一般为关闭浏览器）时，数据被清除。
现今，几乎主流的浏览器都支持该Web存储标准，并且，因为它的易用性和支持较大容量的数据存储等特性，所以，在平时的开发工作中，使用的频率还是比较高的。
在使用之前，可以打开浏览器，在浏览器控制台上输入以下代码片段，检查你所使用的浏览器是否支持该Web存储标准。以localStorage为例：

if (window.localStorage) {
  console.log('支持Web存储标准');
}
else{
  console.log('不支持Web存储标准');
}

方法与属性

• setItem('key', 'data')。通过该方法对数据进行存储，它接收两个参数：键名、要存储的数据。

  localStorage.setItem('key', 'data');
  
  sessionStorage.setItem('key', 'data');

• getItem()。通过该方法获取已经存储的数据，它接收一个参数：对应的键名。

  localStorage.getItem('key');
  
  sessionStorage.getItem('key');

• removeItem()。通过该方法删除某条已存储的数据，它接收一个参数：对应的键名。

  localStorage.removeItem('key');
  
  sessionStorage.removeItem('key');

• clear()。通过该方法可清除所有已存储的数据。

  localStorage.clear();
  
  sessionStorage.clear();

• key()。通过该方法可获得已存储数据的键名，它接收一个参数：数值索引。与数组类似，该索引从下标为0开始。

  localStorage.key(2);
  
  sessionStorage.key(2);

• 唯一的属性：length。通过该属性可得知已存储的数据数量。

  localStorage.length;
  
  sessionStorage.length;