H5当中的web缓存

悠悠 2022-12-25 11:55 92阅读 0赞

### **localStorage 方法存储的数据没有时间限制** ###

保存数据

localStorage.setItem("name", “Jack");

读取数据

localStorage.getItem("name");

删除数据

localStorage.removeItem ("name");

### sessionStorage 方法当用户关闭浏览器窗口后，数据会被删除  ###

保存数据

sessionStorage.setItem("name", “Jack");

读取数据

sessionStorage.getItem("name");

删除数据

sessionStorage.removeItem ("name");

**不同点：**

1、存储大小

cookie 数据大小不能超过4K

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

2、有效时间

localStorage 存储持久数据，浏览器关闭后数据不丢失，除非主动删除数据

sessionStorage  数据在当前浏览器窗口关闭后自动删除

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3、数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

**顺便介绍一下cookie**

**使用 js 创建Cookie**

JavaScript 可以使用 **document.cookie** 属性来创建 、读取、及删除 cookie。

document.cookie="name=Jack";

还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="name=Jack; expires=Thu, 18 Dec 2043 12:00:00 GMT";

可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="name=Jack; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

**使用 js 读取 Cookie**

var x = document.cookie;

**使用 js修改 Cookie**

document.cookie="name=Bob; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

**使用 js删除 Cookie**

只需要设置 expires 参数为以前的时间即可，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，删除时不必指定 cookie 的值。

以上仅供自己交流学习

发表评论取消回复

表情：

评论列表（有 0 条评论，92人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5之manifest 应用缓存机制

H5之manifest 应用缓存机制 manifest 应用缓存机制好处编写 manife

迷南。/ 2023年10月10日 15:59/ 0 赞/ 21 阅读

相关 H5当中的web缓存

localStorage 方法存储的数据没有时间限制保存数据 localStorage.setItem("name", “Jack"); 读取数据

悠悠/ 2022年12月25日 11:55/ 0 赞/ 93 阅读

相关 WebView自动H5缓存-清除缓存ios

iOS的Webview加载HTML时会自动缓存JS、CSS等文件，当下次加载HTML时会根据请求的缓存策略是否使用缓存本地的JS和CSS，如果本地有缓存，那么直接返回本地资源(

╰+哭是因爲堅強的太久メ/ 2022年10月09日 14:30/ 0 赞/ 211 阅读

相关 H5 web Worker

H5 web Worker H5线程线程中可用的变量、函数与类 1. self：用来表示本线程范围内的作用域。 2. postMessage(msg)：向创建线

￡神魔★判官ぃ/ 2022年09月25日 05:18/ 0 赞/ 109 阅读

相关 H5 缓存机制浅析移动端 Web 加载性能优化

1 H5 缓存机制介绍 H5，即 HTML5，是新一代的 HTML 标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5 引入的离线存储，这

╰+哭是因爲堅強的太久メ/ 2022年08月18日 11:59/ 0 赞/ 231 阅读

相关 h5/web前端面试题

1.js中apply和call的作用和区别是什么？ ①主要作用其实就是改变了函数运行时的上下文，简单来讲就是改变所调用函数this的指向，第一个参数是什么对象，此时this

不念不忘少年蓝@/ 2022年07月12日 02:08/ 0 赞/ 166 阅读

相关 h5离线缓存技术

HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文

布满荆棘的人生/ 2022年05月21日 01:22/ 0 赞/ 270 阅读

相关 Web前端 C3+H5总结

一.填空题 1.网页的后缀名通常为(xxx.html)或(xxx.htm)的页面. 2.请写出在网页中设定表格边框的厚度的属性(border),设定表格单元格之间宽度

落日映苍穹つ/ 2022年04月23日 23:24/ 0 赞/ 218 阅读

相关 H5缓存机制

做过返回页面定位的功能，因为带分页，所以用了缓存sessionStorage，请见[博客][Link 1]，然后顺便又了解了其他的缓存机制。一、消除缓存 //方法

野性酷女/ 2022年04月02日 06:29/ 0 赞/ 232 阅读

相关如何设置Nginx缓存来减少H5流量

指令含义 expires 控制HTTP应答中的"Expires"和"Cache-Control"的头标。通过设置浏览器缓存资源的过期时间，来降低服务器的请求压

末蓝、/ 2022年02月19日 19:51/ 0 赞/ 353 阅读