个性化阅读
专注于IT技术分析

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>
赞(0)
未经允许不得转载:srcmini » html5 Web存储 – HTML5教程

评论 抢沙发

评论前必须登录!