html5 Web存储 – HTML5教程

上一章HTML5教程请查看：html5视频video元素

在本教程中，你将学习如何使用HTML5 web存储特性在用户的浏览器上存储数据。

什么是Web存储？

HTML5的web存储功能允许你在用户的电脑上本地存储一些信息，这与cookie类似，但它比cookie更快、更好。然而，web存储并不比cookie更安全。请查看关于PHP cookie的教程以了解更多关于cookie的信息。

存储在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>