cookie、localStorage、sessionStorage、应用程序缓存之间的区别和使用

最新推荐文章于 2022-04-25 16:41:36 发布

枸杞加上

最新推荐文章于 2022-04-25 16:41:36 发布

阅读量244

点赞数

分类专栏： HTML 文章标签： web html5

本文链接：https://blog.csdn.net/dypnlw/article/details/115024799

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Web存储

HTML5新增了两种存储方式：localStorage、sessionStorage，而在此之前，主要使用的是cookies存储。下面来讲述下这三者的区别和运用场景：

cookies存储

介绍

cookies实际上是一个小型的文本数据（不超过4KB）每个浏览器都会有一个专门的文件夹存放cookies数据，cookies的内容主要有key/value值以及用于控制cookie有效期、安全性、使用范围的几个可选属性组成。我们可以在浏览器中看到cookie。
在这里插入图片描述
一条cookie记录大致组成及作用如下

组成

Namge/Value：设置Cookie的名称及相对应的值，对于认证Cookie，Value值包括Web服务器所提供的访问令牌。
Expires/Max-Age：设置Cookie的生存期（GMT格式），属性值缺省时，为会话性Cookie，仅保存在客户端内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效。Max-Age为http/1.1协议中的名字，单位是秒。max-age有三种可能值：负数、0、正数。负数：有效期session；0：删除cookie；正数：有效期为创建时刻+ max-age。
Path：定义了Web站点上可以访问该Cookie的目录。
Domain：指定了可以访问该 Cookie 的 Web 站点或域，domain禁止设置 .org .com 等通用顶级域名，主要是为了减小受到Cookie攻击发生的范围。
Secure：指定是否使用HTTPS安全协议发送Cookie，如果设置了就相当于只有在发送安全请求（https）时才会将cookie数据代入到请求中。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。
HTTPOnly：防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。

更多关于Cookies的信息及安全防护等可以查看百度百科

运用场景

cookie中的数据，在每次发送浏览器请求时，都会被自动放入http请求中，浏览器有相关的配置开关来决定是否每个请求都需要包含这些cookie数据，基于这一特性，cookie是和存放每次请求都必须要传输的数据，比如身份认证信息等。

操作cookie

我们可以在控制台通过执行document.cookie的方式来获取或设置非HttpOnly类型的cookie数据，数据属性之间使用分号分隔。

要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。但要注意一点，在设置新cookie时，path/domain这几个选项一定要旧cookie保持一样。否则不会修改旧值，而是添加了一个新的 cookie。

删除一个cookie 也挺简单，也是重新赋值，只要将这个新cookie的expires选项设置为一个过去的时间点就行了。但同样要注意，path/domain/这几个选项一定要旧cookie 保持一样。

注意：cookie中逗号，分号，空格都被当做特殊符号，如果key和value中存在这3个特殊字符，需要用escape进行编码，unescape解码。

localStorage

localStorage是没有时间限制的数据存储,存储空间一般为5M
在这里插入图片描述

常用方法

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
判断是否存在某个属性值：localStorage.hasOwnProperty(key);

localStorage中的数据是采用key/value的方式存储的，我们可以直接使用.或者[]的方式来访问指定key的value值，如下：

// 更推荐采用.setItem，.getItem的方式获取
localStorage.name = 'myname'
localStorage['name'] //myname

默认情况localStorage的value值只能存储字符串，我们可以通过JSON转换的方式，存储数组或者对象。

var users = [
    {
        name: "xiaoming",
        grade: 1
    },
    {
        name: "teemo",
        grade: 3
    }
]
//写入
var usersStr = JSON.stringify(users);
localStorage.user = usersStr
//读取
var newUser = JSON.parse(localStorage.user)

sessionStorage

针对一个session的数据存储，当关闭浏览器或者关闭网页时，存储的数据就会被清除，存储空间一般为5M。
在这里插入图片描述

常用方法

保存数据：sessionStorage.setItem(key,value);
读取数据：sessionStorage.getItem(key);
删除单个数据：sessionStorage.removeItem(key);
删除所有数据：sessionStorage.clear();
得到某个索引的key：sessionStorage.key(index);

注意：localStorage和sessionStorage的唯一区别就是两者存储数据的时间长短不一样，在存储数据时，都是使用string的方式存储，所以在从storage中取数据时要注意类型转换的问题。

H5应用程序缓存

HTML5提供了应用程序缓存，通过创建cache manifest文件来创建web应用的离线版本。这代表我们可以在离线的情况下访问。

应用程序缓存依赖于manifest文件，manifest文件告知浏览器被缓存的内容以及不被缓存的内容。其文件内容可以划分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

下面是一个manifest文件的例子：

CACHE MANIFEST        
# 2012-02-21 v1.0.0 这个是注释，更改注释也同样会促使浏览器更新缓存
/theme.css        
/logo.gif        
/main.js        
        
NETWORK:        
login.php        
        
FALLBACK:       
# 下面参数第一个url是资源，第二个是替补
/html/ /offline.html

如何更新缓存

应用程序被缓存以后，就会持续保持缓存，知道以下情况：