07.HTML 5 Web 存储

2021-09-24 22:54:47

(来自W3CSchool)

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

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

保存一个姓名
<!DOCTYPE html>
<html>
<body>

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

<script>
    // Check browser support（typeof返回的是对象的类型，如果浏览器支持web Storage, typeof(Storage)的类型会返回function，如果不支持，得到undefined)
    //全局函数 typeof()返回值类型为字符串类型，六个可能值： "number"， "string"， "boolean"， "object" ，"function"， 和 "undefined"。
    if (typeof(Storage) !== "undefined") {
        // Store
        localStorage.setItem("data", "ren");
        // Retrieve
        document.getElementById("result").innerHTML = localStorage.getItem("data");
    } else {
        document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
    }
</script>

</body>
</html>

//记录访问数
<!DOCTYPE html>
<html>
<body>
<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>
<script>
    if (localStorage.pagecount)
    {
        localStorage.pagecount=Number(localStorage.pagecount) +1;
    }
    else
    {
        localStorage.pagecount=1;
    }

    //document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法，它能够直接在文档流中写入字符串，一旦文档流已经关闭，
    // 那document.write就会重新利用document.open打开新的文档流并写入，此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器将重新构建DOM并渲染新的页面
    document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>

</body>
</html>

sessionStorage 方法

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

<!DOCTYPE html>
<html>
<head>
    <script>
        function clickCounter() {
            if(typeof(Storage) !== "undefined") {
                if (sessionStorage.clickcount) {
                    sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
                } else {
                    sessionStorage.clickcount = 1;
                }
                document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
            } else {
                document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
            }
        }
    </script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">请点击这里</button></p>
<div id="result"></div>
<p>请点击按钮使计数器递增。</p>
<p>请关闭浏览器或标签页，然后再试一次，计数器会重置。</p>
</body>
</html>

sessionStorage实现页面计数，浏览器推出后缓存会被重置

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (sessionStorage.pagecount)
    {
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
    }
else
    {
    sessionStorage.pagecount=1;
    }
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");

</script> 

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>

</body>
</html>

码农公寓

相关文章