美文网首页
HTML Web Storage

HTML Web Storage

作者: 寒山竹叶青 | 来源:发表于2019-10-22 16:01 被阅读0次

    什么是HTML Web Storage

    Web Storage是HTML5的新特性,通过Web Storage,用户可以实现在浏览器本地存储数据。

    在HTML5之前,本地数据存储是通过cookie的方式实现的,这么做存在两个缺点:一是cookie中所能存的数据容量是有限的,二是cookie总是附加在对服务器的请求中,每次请求时都要带上这些无需传输给服务器的数据,从而影响了请求效率。

    Web Storage则解决了这样的问题,其存储上限要更大(上限最小可达5MB)并且存储在本地的信息不会再附加在对服务器的请求中。

    HTML Web Storage对象

    HTML Web Storage对象有两种,分别是window.sessionStoragewindow.localStorage。存储方式均是通过键值对进行存储。通过名字可以看出,一个是基于session的,一个是不基于session的。

    基于session的window.sessionStorage当session结束(关闭浏览器标签页)后存储的数据就被删除了;不基于session的window.localStorage当session结束后数据并不会被删除,而是保存在了计算机上,除非手动清理掉。所以当建立访问该站点的新session后仍然可以使用这些数据。当然,这里的“可以使用”仅限于和存储时的同一站点才行。

    因为Web Storage中数据是按照来源(包括domain和协议)存储的,同一个来源的所有页面均可以存储和使用相同的数据。

    localStorage对象

    使用举例如下:

    // Store
    localStorage.lastname = "Smith";
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.lastname;
    //Remove
    localStorage.removeItem("lastname");
    

    注意:键值对以字符串形式存储,所以要以其他类型使用的话应进行类型转换。

    sessionStorage对象

    使用举例如下:

    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
    } else {
      sessionStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "You have clicked the button " +
    sessionStorage.clickcount + " time(s) in this session.";
    

    相关文章

      网友评论

          本文标题:HTML Web Storage

          本文链接:https://www.haomeiwen.com/subject/rtgqvctx.html