HTML Web Storage

什么是HTML Web Storage

Web Storage是HTML5的新特性，通过Web Storage，用户可以实现在浏览器本地存储数据。

在HTML5之前，本地数据存储是通过cookie的方式实现的，这么做存在两个缺点：一是cookie中所能存的数据容量是有限的，二是cookie总是附加在对服务器的请求中，每次请求时都要带上这些无需传输给服务器的数据，从而影响了请求效率。

Web Storage则解决了这样的问题，其存储上限要更大（上限最小可达5MB）并且存储在本地的信息不会再附加在对服务器的请求中。

HTML Web Storage对象

HTML Web Storage对象有两种，分别是window.sessionStorage和window.localStorage。存储方式均是通过键值对进行存储。通过名字可以看出，一个是基于session的，一个是不基于session的。

基于session的window.sessionStorage当session结束（关闭浏览器标签页）后存储的数据就被删除了；不基于session的window.localStorage当session结束后数据并不会被删除，而是保存在了计算机上，除非手动清理掉。所以当建立访问该站点的新session后仍然可以使用这些数据。当然，这里的“可以使用”仅限于和存储时的同一站点才行。

因为Web Storage中数据是按照来源（包括domain和协议）存储的，同一个来源的所有页面均可以存储和使用相同的数据。

localStorage对象

使用举例如下：

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
//Remove
localStorage.removeItem("lastname");

注意：键值对以字符串形式存储，所以要以其他类型使用的话应进行类型转换。

sessionStorage对象

使用举例如下：

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";