html5,html5本地存储
您的位置: 主页 > web前端文章 > html5 >

HTML5本地存储【访问量:88】

什么是Web存储

HTML5的网络存储功能可让您在用户的计算机上本地存储一些信息,类似于Cookie,但更安全,速度更快。存储在网络存储器中的信息不会发送到网络服务器,而不是发送给每个请求的数据发送到服务器的cookie。此外,在Cookie允许您存储少量数据(接近4KB)的情况下,Web存储允许您存储高达5MB的数据。 有两种类型的网络存储,其范围和生命周期不同: 本地存储 - 本地存储使用该localStorage对象永久存储整个网站的数据。这意味着存储的本地数据将在第二天,下一周或下一年可用,除非您将其删除。 会话存储 - 会话存储使用该sessionStorage对象临时存储数据,用于单个窗口(或选项卡)。会话结束时,即用户关闭该窗口(或选项卡)时,数据将消失。

提示:所有主流浏览器都支持HTML5的网络存储功能,例如Firefox,Chrome,Opera,Safari和Internet Explorer 8+。

localStorage对象

如前所述,localStorage对象存储没有到期日期的数据。每条数据都存储在一个键/值对中。密钥标识信息的名称(如'first_name'),并且该值是与该密钥相关联的值(称为'Peter')。

if(localStorage){
    // Store data
    localStorage.setItem("first_name", "Peter");
 
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name"));
} else{
    alert("Sorry, your browser do not support local storage.");
}

举例说明: 以上JavaScript代码具有以下含义: localStorage.setItem(key,value):存储与键关联的值。 localStorage.getItem(key):检索与键关联的值。 您还可以通过将密钥值传递给removeItem()方法来从存储中删除特定项目,例如localStorage.removeItem(key)。 但是,如果要删除完整存储,请使用该clear()方法localStorage.clear()。该clear()方法一次清除localStorage中的所有键/值对,所以在使用它之前请仔细考虑。

注意: Web存储数据(本地和会话)在不同浏览器之间不可用,例如,存储在Firefox浏览器中的数据在Google Chrome,Internet Explorer或其他浏览器中不可用。

sessionStorage对象该sessionStorage对象的工作方式localStorage与之相同,只是它仅为一个会话存储数据,即数据一直保留到用户关闭该窗口或选项卡为止。

if(sessionStorage){
    // Store data
    sessionStorage.setItem("last_name", "Parker");
 
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else{
    alert("Sorry, your browser do not support session storage.");
}


2018-04-04
匿名评论

最新推荐