Web存储（localStorage与sessionStorage）

基础概念

客户端存储的形式有多种，如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;