HTML5 基础（004_Web 存储）

来源：互联网发布：淘宝数据线编辑：程序博客网时间：2024/06/10 19:51

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>

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

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

参考网址：
http://www.w3school.com.cn/html5/html_5_webstorage.asp

0 0