HTML5 web存储

　　之前，我们在客户端存储数据都是使用cookie的方式，但是，cookie不适合大量数据的传递，cookie的速率和效率都很低，于是html5引入了在客户端存储数据的新方式：

localStorage
sessionStorage

第一部分： localStorage

　　localStorage存储数据是没有时间限制的，即使过了一年，数据依然可用。

　　创建localStorage可以使用localStorage.setItem()方法，该方法接收两个参数，第一个是键名，第二个是键值。

　　读取localStorage可以使用localStorage.getItem()方法，该方法接收一个参数，即键名。

　　举例如下：

    <script>
        localStorage.setItem("name", "朱振伟");
        localStorage.setItem("sex", "男");
        localStorage.setItem("age", 21);
        document.write(localStorage.getItem("name")+"<br/>");
        document.write(localStorage.getItem("sex")+"<br/>");
        document.write(localStorage.getItem("age")+"<br/>");
    </script>

　　最终的效果如下所示：

　　创建数据的方式还有一种，就是直接添加给localStorage，如下所示：

        localStorage.test = "good";
        document.write(localStorage.test+"<br/>");
        document.write(localStorage.getItem("test"));

　　最终的效果如下：

　　除此之外，我们还可以使用它来对用户访问页面的次数进行计数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage实现页面计数</title>
    <style>
        div.wrap {
            font-size: 20px;
        }
        div.wrap span {
            font-size: 30px;
            font-style: italic;
            text-shadow: 0 0 5px blue;
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div class="wrap">您第<span class="time"></span>次来到这里了</div>
    <script>
        if (localStorage.pagecount === undefined) {
            localStorage.setItem("pagecount", 0);
        } else {
            localStorage.pagecount = Number(localStorage.pagecount) + 1;
        }       
        document.querySelector(".time").innerHTML = localStorage.pagecount;
    </script>
</body>
</html>

　　我们可以发现，只要我们刷新一次页面，计数就会增加1，即使我们关掉了浏览器，然后再次打开这个页面，也可以发现计数是

　　没有中断的。这就是localStorage的local之意了。

　　说明：一般而言， localStorage存储的数据都在下面的路径中：

C:UsersUsernameAppDataLocalGoogleChromeUser DataDefaultLocal Storage

　　我们也可以打开chrome控制台，然后进入application就可以发现 localStorage 的选项了。

进来之后，我们还可以编辑存储的数据，或者删除存储的数据。

注意：当我们在编辑器中创建localStorage之后，刷新页面，就可以看到保存的localStorage了。

第二部分：sessionStorage

　　　sessionStorage和localStorage十分相似，唯一的区别在于 -- sessionStorage 方法针对一个session进行数据存储，当用户关闭浏览器之后，数据就会被删除，而localStorage存储的数据即使在浏览器关闭之后也不会被删除。

　　在创建和获取sessionStorage时，方法与前者一致，如下：

        sessionStorage.test = "hahah";
        sessionStorage.setItem("name", "zzw");
        sessionStorage.setItem("age", 21);
        document.write(sessionStorage.test + "<br/>");
        document.write(sessionStorage.getItem("name") + "<br/>");
        document.write(sessionStorage.getItem("age") + "<br/>");

　　效果如下：

　　这时，我们查看sessionStorage, 如下：

　　然后，我把此页面关掉，然后再把html中的相关代码注释，可以发现已经没有sessionStorage。

　　而如果采用同样的做法， localStorage存储的数据依旧会在。

　　举一个例子：

<!DOCTYPE html>
<html>
<head>
<script>

function clickCounter() {
    sessionStorage.setItem("clickcount", 1);

    // 虽然在这里我设置的是数字1， 但是输出之后就成了字符串,  即sessionStorage只能存储字符串
    console.log("第一次", typeof sessionStorage.clickcount); // 第一次 string
    document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 1 次。";

    // 注意：这里我使用了自定义函数的模式
    clickCounter = function () {
        sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
        document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">请点击这里</button></p>
<div id="result"></div>
<p>请点击按钮使计数器递增。</p>
<p>请关闭浏览器或标签页，然后再试一次，计数器会重置。</p>
</body>
</html>

　　注意：在上面的这个例子中，我使用了自定义函数的模式，因为我们对于其中的某些语句只需要使用一次，所以可以使用这种模式，更多可以看我的文章《JavaScript模式》。

　　另外，我们也可以使用sessionStorage来实现统计访问次数，但是每次在关闭浏览器之后就会停止计数了。

　　点击这里看例子

　　上面只是介绍了localStorage和sessionStorage的主要的方法，下面的例子中有更多的方法实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webstorage</title>
</head>
<body>
<script>
    localStorage.setItem("zzw", "shuaiq");
    localStorage.removeItem("zzw");
    console.log(localStorage.getItem("zzw")); // null 因为在上一行被我删去了
    console.log(localStorage.length); // 8  获得本地存储的条数
    localStorage.setItem("ht", "beau");
    console.log(localStorage.ht); // beau  这里我们可以直接使用key，即键名来获取键值。
    localStorage.clear();
    console.log(localStorage.length); // 0 即通过clear命令可以删除所有的本地存储
</script>

</body>
</html>