当前浏览器客户端提供多种数据本地存储方案。

 

关于数据本地存储方案概述可以参阅JavaScript 本地存储一章节。

 

HTML5之前，通常利用Cookie在本地存储数据，但缺点明显，简单总结如下：

 

（1）.Cookie存储量太小，具体存储量因浏览器不同而有所差别，大致在数K左右。

 

（2）.每次HTTP(S)请求，Cookie都会跟随发送到服务器，浪费带宽。

 

所以Cookie并不适合在客户端存储数据，于是存储量更大且不会发送到服务器的存储方案诞生。

 

本文仅介绍localstorage的用法，sessionStorage与其极为相似，indexedDB则更为强大，存储量也更大。

 

（1）.sessionStorage可以参阅sessionStorage 用法一章节。

 

（2）.indexedDB可以参阅indexedDB 教程板块。

 

一.localstorage特点：

 

localStorage数据是永久存储的，除非人为操作删除，与sessionStorage不同。

 

sessionStorage存储会话期间的数据，会话结束，数据也就被删除。

 

存储数据大小的上限是5M，具体存储量因浏览器不同而有所差别。

 

并且不会随着HTTP(S)请求发送到服务器。

 

二.具有的属性与方法：

 

具体用法可以参阅本版块相关文章，下面仅仅做一下罗列。

 

（1）.length属性：

 

[JavaScript] 纯文本查看 复制代码

1

localstorage.length

可以获取存储数据项的数量。

 

（2）.setItem()方法：

 

[JavaScript] 纯文本查看 复制代码

1

localstorage.setItem()

此方法可以新增或者修改sessionStorage对象中的一个数据项。

 

（3）.getItem()方法：

 

[JavaScript] 纯文本查看 复制代码

1

localstorage.getItem()

此方法可以获取指定键名对应的数据项的值。

 

（4）.removeItem()方法：

 

[JavaScript] 纯文本查看 复制代码

1

localstorage.removeItem()

此方法可以移除指定指定键名的数据项，无返回值。

 

（5）.clear()方法：

 

[JavaScript] 纯文本查看 复制代码

1

localstorage.clear()

此方法可以清除sessionStorage中所有的数据项。

 

（6）.key()方法：

 

[JavaScript] 纯文本查看 复制代码

1

localstorage.key()

通过此方法可以返回指定索引位置数据项的键名（不推荐使用此方法）。

 

三.事件：

 

具有storage 事件，具体参阅JavaScript storage 事件一章节。