12.27 HTML 本地存储（Local Storage）

优质

小牛编辑

174浏览

2023-12-01

如课程引言中所述，本地应用程序（如移动APP）能够利用本地操作系统的文件系统来存储和读取数据，这使得其可以在离线环境下工作，由于节省了大量网络数据传输，从而可以获得更高的性能。 HTML5里面引入的本地存储（Local Storage）接口就是为了达到相同的目的，把部分客户端数据保存在本地浏览器中，从而提高Web应用的性能。和Cookie类似，本地存储也是和源（origin，也就是域名、协议和端口的组合）相关的，现代浏览器给本地存储提供了5到10M大小的空间（每个域）。

在HTML5之前，我们是通过Cookie来存储数据在浏览器中，Local Storage比Cookie强大的地方在于：1.容量更大 2.不需要传输给服务器。

浏览器支持

API
Web Storage	4.0	8.0	3.5	4.0	11.5

Local Storage对象

HTML5 提供了两种在客户端存储数据的新方法：

window.localStorage - 没有时间限制的数据存储
window.sessionStorage - 对于一个会话（session）的数据存储，当浏览器标签被关闭时丢失

window.localStorage和localStorage在代码中是等同的。

在使用Local Storage之前，先检查一下浏览器是否支持：

if(typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}}

`localStorage`的存取

localStorage对象存储的数据没有到期日期。当浏览器关闭时，数据不会被删除，而会一直存在。

// 保存
localStorage.setItem("nickname", "iefreer");
// 读取
document.getElementById("result").innerHTML = localStorage.getItem("nickname");

代码解释如下：

创建一个localStorage名/值对（name/value），其中name="nickname"，value="iefreer"。
读取刚才保存的用户昵称数据，并显示在id为result元素中。

上面的代码还可以简写为下面这样：

// 保存
localStorage.nickname = "iefreer";
// 读取
document.getElementById("result").innerHTML = localStorage.nickname;

如果要删除该数据，可以使用如下代码：

// 删除
localStorage.removeItem("lastname");

如果要清空本地存储，可以使用如下代码：

// 删除
localStorage.clear();

名/值对只能保存字符串，当需要保存数字时，记得要转换格式。

下面的例子对用户访问页面的次数进行计数，在该例中value字符串被转换成数字来增加计数：

if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");

数组

除了使用setItem和getItem，我们还可以在Local Storage中保存数组数据：

localStorage["key1"]="value1";
 var value=localStorage["key1"];

Local Storage还提供了一个length属性和一个key方法来操作数组：

for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
alert(value);
}

我们也可以使用如下简化循环语法（for in的方式称之为foreach语法）：

for (var key in localStorage) {
var value = localStorage[key];alert(value); }

如果要删除某个数据，我们可以使用localStorage.removeItem(key);

会话存储（sessionStorage）语法

sessionStorage对象和localStorage对象用法一样，上面关于localStorage的代码，替换成sessionStorage一样工作。唯一的差别在于sessionStorage存储的数据只在一个会话期间有效。也就是当用户关闭浏览器窗口时，该数据被删除。

查看本地存储数据

现代浏览器如Chrome都提供了开发工具可以用来查看本地存储数据，如下图所示：

本地存储限制

如果本地存储的数据超过了浏览器能提供的空间的上限时，浏览器会抛出一个异常：QUOTA_EXCEEDED_ERR，所以应用程序应该把数据存储的代码放在try catch对中，以免导致浏览器崩溃。你可以使用如下的代码来测试这种情况：

localStorage.setItem("blow", "-");
while (true) {
    var blow = localStorage.getItem("blow");
    try {
        localStorage.setItem("blow", blow + blow);
    } catch (e) {
        alert("Your browser blew up at bytes with exception: " + e);
        break;
    }
}
localStorage.removeItem("blow");

本地存储的编程规范

没有HTML5官方的本地存储命名规范，但是由于当同一域名下的不同应用产生名称冲突时会出现数据覆盖，我们需要建立起良好的编码习惯。
如果你想要保存较多的数组或对象列表数据到本地存储中时，建议使用JSON.stringify来保存并使用JSON.parse来读取该数据。这样序列化后占用的空间更小。

关于命名，我们建议的方式是为变量加上应用ID的前缀，如下图所示：

实现一个在线待办事项应用

除了记住用户偏好外，一个典型的本地存储应用是日程安排，我们把这个作为一个课程练习。要实现如下功能：

一个简单的列表页面和一排操作按钮用来添加或清除某个事项
可以实时保存待办事项，并可以从本地存储中加载以前的数据

到目前为止，我们学习到的内容都比较有趣，但是接下来，我们要讲述的HTML5多线程和双工通信方面的技术，对于前端工程师而言可能就偏晦涩，需要对计算机操作系统和网络通信协议有更为深入的了解。不过如果你不需要实现高性能计算或即时通讯方面的网页应用，可以暂时忽略这些章节。