HTML5 Web Storage 快速入门指南

Question

几乎所有的桌面和移动应用程序都需要在本地储存用户的数据，但是对于网站如何储存用户的数据一直都是在服务端，在过去我们使用过 Cookie，但是他们有比较严重的局限性。HTML5 带给我们更好的方式去解决这个问题。今天我将为你展示 IndexedDB 和 HTML5 Web Storage 这两个 API 的使用方法和说明。

Web Storage 是什么？

一般来说 Web 存储（也被称为 DOM 存储）是指一组 API 来存储数据在客户端的浏览器提供了一个简单的方法。它比 Cookie 更安全和更快读写速度，更不用说更强大。数据存储在用户的浏览器中，所以不像 Cookie 要在发送到服务器。它也可以存储大量的数据比 Cookie 不影响你的网站的性能。 Web Storage 用于存储数据的两个很棒的对象：

• localStorage 通过使用该对象，你将永久性存储数据，这意味着数据将存储在用户的本地存储，而且没有过期时间。
• sessionStorage 通过使用该对象，数据存储，你将在那里直到游客关闭浏览器（而不是标签）。这是一个良好的用例是保存喜欢的内容，一个用户填写临时数据，如果他们关闭标签或刷新页面。

现在我们知道了网络存储的是什么，现在是时候让我们的手上。

localStorag

存储这是非常简单的数据保存到存储，你只需要指定一个属性。阅读是一样简单，你可以看到下面的例子：

localStorage.myText = 'This is some text which have been stored with localStorage object';
document.getElementById("text").innerHTML = localStorage.myText;

sessionStorage

存储和检索数据从 sessionstorage 是通过同样的方式：

sessionStorage.myText = 'This is some text which have been stored with sessionStorage object';
document.getElementById("text").innerHTML = sessionStorage.myText;

两个对象都有 setitem()，getitem() 和 removeitem() 方法函数，您也可以使用：

localStorage.setItem('username','Johnny');
console.log(localStorage.getItem('username'));
localStorage.removeItem('username');

你也可以在控制台输出他们，并查看它们的长度：

console.log(localStorage.length);
for(var i in localStorage){ console.log(localStorage[i]);}

这些都是使用 Web 存储的基础，但他们将足以让你在你的网络应用程序的 API 的实现。

浏览器的支持

通常是用可怕的 HTML5 的功能的情况下，你必须看看浏览器支持的列表之前利用它。 Web 存储支持的几乎所有的现代浏览器 IE8 + 等，所以它是现成的。不幸的是 IE7 和更早版本的 Internet Explorer 不支持的 API。