html5 Web存储 – HTML5教程 html5Web存储|HTML

上一章HTML5教程请查看：html5视频video元素
在本教程中，你将学习如何使用HTML5 web存储特性在用户的浏览器上存储数据。
什么是Web存储？HTML5的web存储功能允许你在用户的电脑上本地存储一些信息，这与cookie类似，但它比cookie更快、更好。然而，web存储并不比cookie更安全。请查看关于PHP cookie的教程以了解更多关于cookie的信息。
【html5 Web存储 – HTML5教程】存储在web存储中的信息不会发送到web服务器，而每个请求都将数据发送到服务器的cookie则相反。另外，cookie允许你存储少量数据(大约4KB)，而web存储允许你存储最多5MB的数据。
有两种类型的web存储，它们的范围和生存期不同：

本地存储localStorage——本地存储使用localStorage对象来永久存储整个网站的数据。这意味着存储的本地数据将在第二天、下周或明年可用，除非你手动删除它。
会话存储sessionStorage——会话存储使用sessionStorage对象临时存储单个浏览器窗口或选项卡的数据。当会话结束时，也就是当用户关闭浏览器窗口或标签页时，数据就消失了。

提示：HTML5的网络存储功能在所有主要的现代网络浏览器中都得到了支持，比如Firefox、Chrome、Opera、Safari和Internet Explorer 8及以上。
localStorage对象如前所述，localStorage对象存储没有过期日期的数据。每段数据都存储在一个键/值对中。键标识信息的名称(如’ first_name’ )，而值是与该键相关联的值(如’ Peter’ )。这里有一个例子：

< script> // 检查localStorage对象是否存在 if(localStorage) { // 储存数据 localStorage.setItem("first_name", "Peter"); // 获取数据 alert("Hi, " + localStorage.getItem("first_name")); } else { alert("对不起，你的浏览器不支持本地存储!"); } < /script>

例子解释：
以上JavaScript代码的含义如下:

LocalStorage.setItem(key，value)存储与键关联的值。
getitem (key)检索与该键关联的值。

你还可以通过将关键字名称传递给removeItem()方法(如localStorage.removeItem(“ first_name” ))从存储中删除特定的项(如果它存在)。
但是，如果希望删除完整的存储，可以使用clear()方法，比如localStorage.clear()。clear()方法不接受任何参数，只是一次性清除localStorage中的所有键/值对，所以在使用它之前要仔细考虑。
注意：web存储数据(localStorage和sessionStorage)在不同的浏览器之间不可用，例如Firefox浏览器中存储的数据在谷歌Chrome、Safari、Internet Explorer或其他浏览器中不可用。
sessionStorage的对象sessionStorage对象的工作方式与localStorage相同，不同之处在于它只存储一个会话的数据，即数据一直保留到用户关闭该窗口或选项卡。
让我们尝试下面的例子来理解它是如何工作的：

< script> // 检查sessionStorage对象是否存在 if(sessionStorage) { // 储存对象 sessionStorage.setItem("last_name", "Parker"); // 获取数据 alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name")); } else { alert("对不起，你的浏览器不支持会话存储!"); } < /script>