HTML5 基础（004_Web 存储）-CSDN博客

本文链接：https://blog.csdn.net/Google2606/article/details/52510702

Web 存储：即在客户端存储数据，这里的客户端主要指浏览器。在 html5 规范出来之前，Web 应用在客户端存储数据的主角是 cookie，但是，随着 Web 技术的不断发展，cookie 的局限性也逐渐显露。例如，cookie 只能存储有限的 4KB 数据；每个 HTTP 请求中都包含 cookie，从而导致传输相同的数据减缓我们的 Web 应用程序等等。由于 cookie 存在诸多弊端，html5 提供的两种在客户端存储数据的新方法应运而生，localStorage 方法（没有时间限制的数据存储）、sessionStorage 方法（针对一个 session 的数据存储）。

localStorage 方法：localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

示例代码（统计当前页面的访问次数）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>localStorage Example</title>
        <link href="css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>
                        <p class="text-center">Hello world!</p>
                    </h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p class="text-center bg-primary">访问次数</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p class="text-right"><button type='button' class='btn btn-primary btn-xs'>Delete</button></p>
                </div>
            </div>
        </div>

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                if(localStorage.count) {
                    localStorage.count = Number(localStorage.count) + 1;
                } else {
                    localStorage.count = 1;
                }
                $($(".container div div")[1]).append("<p class='text-center bg-success'>"+"Visits " + localStorage.count + " time(s)."+"</p>");
            });
            $("button").click(function() {
                localStorage.clear(); // 清除本地存储
                window.location.reload(); // 页面刷新
            });
        </script>
    </body>
</html>

运行结果（Chrome 版本 52.0.2743.116 m）：

刷新浏览器，当前页面的访问次数累计加 1。
关闭浏览器，重新开启浏览器访问刚才的页面，当前页面的访问次数累计加 1。

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

示例代码（统计当前页面的访问次数）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>sessionStorage Example</title>
        <link href="css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>
                        <p class="text-center">Hello world!</p>
                    </h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p class="text-center bg-primary">访问次数</p>
                </div>
            </div>
        </div>

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                if(sessionStorage.count) {
                    sessionStorage.count = Number(sessionStorage.count) + 1;
                } else {
                    sessionStorage.count = 1;
                }
                $($(".container div div")[1]).append("<p class='text-center bg-success'>"+"Visits " + sessionStorage.count + " time(s)."+"</p>");
            });
        </script>
    </body>
</html>