cookie和webstorage

HTML 5 Web 存储

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • <!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
    // Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Gates");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
}
</script>

</body>
</html>

    Storage.setItem()

    setItem() 作为 Storage 接口的方法，接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。

    语法

    storage.setItem(keyName, keyValue);

    参数

    keyName
    一个 DOMString，要创建或更新的键名。
    keyValue
    一个 DOMString，要创建或更新的键名对应的值。

    返回值 无



  • sessionStorage -

    sessionStorage 方法

    sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

    如何创建并访问一个 sessionStorage：

  • <body>
    <div id="result"></div>
    <script>
        if (typeof(Storage)!=="undefined") {
            sessionStorage.setItem("lastname","Gates");
            document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
        }else{
            document.getElementById("result").innerHTML = "抱歉你所找的內容本瀏覽器暫時不支持";
        }
        if(sessionStorage.pagecount){
            sessionStorage.pagecount = Number(sessionStorage.pagecount)+1;
        }else{
            sessionStorage.pagecount = 1;
        }
        document.write("visits的次數為"+sessionStorage.pagecount+"次")
    </script>
    </body>

     



 

posted @ 2017-10-31 11:21  趁清风正好  阅读(272)  评论(0)  编辑  收藏  举报