Web存储（localStorage与sessionStorage）

以你之姓@ 2022-07-14 12:11 165阅读 0赞

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/53526842][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;

[http_blog.csdn.net_zhou_xiao_cheng_article_details_53526842]: http://blog.csdn.net/zhou_xiao_cheng/article/details/53526842