JS缓存三种方法_sessionStorage_localStorage_Cookie
1.sessionStorage:临时的会话存储
只要当前的会话窗口未关闭，存储的信息就不会丢失，即便刷新了页面，或者在编辑器中更改了代码，存储的会话信息也不会丢失。
2.localStorage:永久存储
会一直将数据存储在客户端的储存方式，即使关闭了浏览器，下次打开的时候仍然可以看到之前存储的未主动清楚的数据(即便是杀毒软件或者浏览器自带的清除功能，也不能将localStorage存储的数据清除掉)
3.Cookie
Cookie是存储在用户计算机上的小文件，保存特定客户端和网站的适量数据，并可以有Web服务器或客户端浏览器访问，允许服务器提供针对特定用户定制的页面，或者页面本身可以包含一些知道cookie中的数据的脚本。
共同点：
都是保存在浏览器端，且同源的。
区别：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
|
名称 |
生命期 |
大小限制 |
与服务器通信 |
是否可以跨域 |
|
cookie |
一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cookie，默认是关闭浏览器后失效 |
4KB |
每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题 |
一般不可，相同 domain 下可以允许接口请求携带 cookie |
|
localStorage |
除非被清除，否则永久保存 |
5MB |
仅在浏览器中保存，不与服务器通信 |
不可 |
|
sessionStorage |
仅在当前会话下有效，关闭页面或浏览器后被清除 |
5MB |
仅在浏览器中保存，不与服务器通信 |
不可 |
知识点补充
Q1：什么是跨域？
A1：在浏览器环境下，跨域是指一个域下文档或脚本去请求另一个域下的资源。
Q2：什么是域？
A2：协议+域名+端口
正常情况下，如果我们通过ajax去请求另一个域的资源是不可行的，违背浏览器的同源策略，浏览器默认阻拦这种行为。
Q3：什么是同源策略？
A3：同源策略SOP（Same Origin Policy），Netscape公司1995年提出并且引入浏览器。浏览器最核心的安全策略。缺少安全策略浏览器容易受到XSS、CSFR等等的攻击。同源就是协议+域名+端口相同。
Q4：同源可以获得浏览器什么支持？
A4：获取cookie、localStorage；获取DOM和js对象；发送ajax请求
设置 localstorage 定时清除
可以使用storage-timing可以设置 localStorage 定时删除。
安装
npm install --save storage-timing
使用
import { Store } from "storage-timing";
const store = new Store();
const data = store.atom("token"); // 获取键为 "token" 的数据
data.set("token 123123", Date.now() + 10 * 1000); // 设置 token 的值，同时设置它在 10 秒钟后过期
console.log(data.get()); // 获取到 "token 123123" ，10 秒钟内获取数据都可以拿到，刷新页面也行，数据存到了 localStorage 中
setTimeout(() => {
console.log(data.get()); // null ，第 11 秒钟后数据就过期了，获取到 null
}, 11 * 1000);
使用 cdn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script
src="https://cdn.jsdelivr.net/npm/storage-timing@1.0.6/lib/index.umd.min.js"
integrity="sha256-e4RNAWBIatQaFq51XreDnL5ZVgKMRwttV3Ka6gCsJCU="
crossorigin="anonymous"
></script>
</head>
<body>
<script>
const store = new window.StorageTiming.Store();
const data = store.atom("token"); // 获取键为 "token" 的数据
data.set("token 123123", Date.now() + 10 * 1000); // 设置 token 的值，同时设置它在 10 秒钟后过期
console.log(data.get()); // 获取到 "token 123123" ，10 秒钟内获取数据都可以拿到，刷新页面也行，数据存到了 localStorage 中
setTimeout(() => {
console.log(data.get()); // null ，第 11 秒钟后数据就过期了，获取到 null
}, 11 * 1000);
</script>
</body>
</html>JS缓存三种方法_sessionStorage_localStorage_Cookie的更多相关文章
- HTML5结合CSS的三种方法+结合JS的三种方法
HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...
- (一)JQuery动态加载js的三种方法
Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...
- 异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
- 应对加密js的三种方法
经常遇到网页在登录后会对用户输入的帐号和密码通过js进行加密,导致模拟登录这类网站时受到阻碍 这里小记一下当前解决该问题的三种方法 1.利用python实现js同等加密. 2.利用selenium模拟 ...
- JS中的phototype JS的三种方法（类方法、对象方法、原型方法）
JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...
- JS编码三种方法的区别：escape、encodeURI和encodeURIComponent
1.escape和它们不是同一类 简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读.编码之后的效果是%XX或者%uXXXX这种形式.其中 ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？
C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...
- (转)在网页中JS函数自动执行常用三种方法
原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...
- JS模拟实现封装的三种方法
前 言 继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承! JS中有很多实现继承的方法,今天我给大家介绍其中的三种吧. 1.在 Object类上 ...
随机推荐
- ApiPost前后端人员可以使用的接口测试工具还带生成文档
整体界面都是全中文非常适合过来使用,在本来使用过 对比来说这个工具调试和界面优化以及生成文档方面都是无可挑剔的 接口请求的参数描述也可以按自己的需求来设置后生成文档,方便了后端接口人员测试后回馈给前端 ...
- Pytorch实战学习（一）：用Pytorch实现线性回归
<PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili P5--用Pytorch实现线性回归 建立模型四大步骤 一.Prepare dataset mini-batch:x.y ...
- nginx添加ssl模块
一.在安装时添加ssl模块1.进入源码包做在的目录,进行编译,编译时添加参数–with-http_stub_status_module --with-http_ssl_module cd /usr/l ...
- （0501） perl-正则表达式-匹配关键字task【知乎】
(1)
- 【springboot】约定优于配置
spring的核心思想:约定优于配置 @SpringBootApplication这个注解的本质是有以下三个注解 1.@SpringBootConfiguration 表示该类是一个配置类 2.@En ...
- df -T 和 du 统计的内存不一致
1.问题原因 客户反馈,df -T 查看到挂载到flash文件的emmc使用了6G左右,但是在flash下看到du -h 只用了2G左右,客户疑问,还有4G去哪儿了? 2.问题怀疑方向 1.怀疑启动阶 ...
- 第一次写，python爬虫图片，操作excel。
第一次写博客,其实老早就注册博客园了,有写博客的想法,就是没有行动,总是学了忘,忘了丢,最后啥都没有,电脑里零零散散,东找找,西看看,今天认识到写博客的重要性. 最近闲着看了潭州教育的在线直播课程,颇 ...
- JS——如果数组中的信息存在多个相同的属性，那么则将这些相同的信息放到同一个children中。
var arr = [ {name: '张三', age: 10, sex: '男'}, {name: '李四', age: 10, sex: '男'}, {name: '钱五', age: 11, ...
- qt vnc 远程左桌面
设备端启动服务器 ./testqt -qws -display VNC:0 客服端启动监控端 VNC Viewer 4
- jdk 13 添加 jre
问题: 安装 jdk 13 版本后发现没有 jre . 解决方法: 1.进入 jdk 安装目录(如:D:\Program\Java\jdk-13.0.2\) 2.在 jdk 安装目录打开命令行,输入以 ...