webstorage

最新推荐文章于 2023-08-01 19:53:33 发布

小瑾沐晚风

最新推荐文章于 2023-08-01 19:53:33 发布

阅读量337

点赞数

本文链接：https://blog.csdn.net/xiaojinguniang/article/details/83688085

版权

在客户端存储数据

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

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

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

localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信

sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

举例：

在下面例子中，a标签链接新开的页面依然可以访问到sessionStorage。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script>
        function shows() {
            console.log("初始页面")
            var str = document.getElementById("text").value.trim();
            window.sessionStorage.setItem("name",str)
            var storage = window.sessionStorage;
            console.log(storage);
            document.getElementById("text").value = "";
        }
    </script>
</head>
<body>
<input type="text" name="text" id="text" />
<input type="button" value="展示sessionStorage" onclick="shows()" />
<a href="text.html">点击打开</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    console.log("打开的新页面");
    var storage = window.sessionStorage;
    console.log(storage);
</script>
</body>
</html>

作用域不同（重点）

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

小瑾沐晚风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webstorage

在客户端存储数据HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每...
复制链接

扫一扫