浏览器缓存机制(四)——sessionStorage和localStorage

最新推荐文章于 2023-08-11 10:44:50 发布

一个诺诺前行的后端程序员

最新推荐文章于 2023-08-11 10:44:50 发布

阅读量347

点赞数

原文链接：https://blog.csdn.net/zhoujie_zhoujie/article/details/56846788?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.chan

版权

一.Web Storage

Web Storage是HTML5提出的本地存储机制，主要目的是克服cookie的一些限制，当数据需要被严格控制在客户端上时，无需持续的将数据发回服务器。

优点：

大量数据的存储（也有限制，因浏览器而异，每个来源2.5M/5M）
数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
跨会话

缺陷:

因为WebStorage API属于一种同步API,所以在保存大数据量或保存对象时的性能不高。
因为缺乏索引,所以在针对大数据量或对象进行搜索时的性能不高。
因为目前主流浏览器均只支持在WebStorage中存储字符串数据,所以当保存对象时必须先将其转换为JSON字符串后进行保存,当获取对象时必须先将取出的字符串后将其还原为对象,所以导致针对对象进行存取操作时的性能不高。

分类：

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

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

浏览器兼容性：

localStorage， sessionStorage都是浏览器的对象，绝大部分现代浏览器中已经得到了很好的支持，但是既然是绝大部分，就必须照顾那些还不支持这两个对象的浏览器。为了检测浏览器是否支持这两个对象，我们可以简单的用下面的代码来检测：

function storageSupport() {  
        try {  
            return 'localStorage' in window && window['localStorage'] !== null;  
        } catch (e) {  
            return false;  
        }  
}
 
 
 
 1
2
3
4
5
6
7

使用方式：
这里写图片描述

注：localStorage， sessionStorage都是Storage类型的实例，Storage类型只能存储字符串，非字符串的数据在存储前会被转化成字符串。

二.sessionStorage

sessionStorage 是个全局对象，它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续。

当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在。

每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        window.οnlοad=function () {
            sessionStorage.setItem("myname","zhoujie");
            alert(sessionStorage.getItem("myname"))

        }
    </script>
</body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

当我在浏览器打开时，会弹出”zhoujie”，数据会在本地进行存储，
有图有真相：
这里写图片描述
接下来我将sessionStorage.setItem(“myname”,”zhoujie”);注释掉，再刷新页面，还是会弹出正确的myname。

但在我注释掉设置语句后，再打开一个新窗口，或者重新关掉浏览器重新打开时，数据就会被清除。
这里写图片描述

这里写图片描述

二.localStorage

localStorage是跨多个窗口，且持续范围可超过当前会话；意味着当浏览器关闭再重新打开，数据依然是可用的。数据保留到通过js删除或用户清除浏览器缓存。

上代码：

<body>
    <script>
        window.οnlοad=function () {
            localStorage.setItem("myname","zhoujie");
            alert(localStorage.getItem("myname"))
        }
    </script>
</body>
 
 
 
 1
2
3
4
5
6
7
8

这时我打开浏览器，会弹出”zhoujie”。看看本地的存储情况：
这里写图片描述

接着我注释掉设置代码，关掉浏览器重新打开，还是会弹出“zhoujie”，并且数据依然在。
这里写图片描述

一个诺诺前行的后端程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器缓存机制(四)——sessionStorage和localStorage

一.Web StorageWeb Storage是HTML5提出的本地存储机制，主要目的是克服cookie的一些限制，当数据需要被严格控制在客户端上时，无需持续的将数据发回服务器。优点：大量数据的存储（也有限制，因浏览器而异，每个来源2....
复制链接

扫一扫