首页 > 其他分享 >JS缓存三种方法

JS缓存三种方法

时间:2022-09-01 13:33:41浏览次数:72  
标签:cookie 存储 缓存 浏览器 跨域 sessionStorage JS 三种 localStorage

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 cookie sessionStorage是不可以进行跨域操作的,但是想进行跨域操作可以使用 postMessage,websocket 进行变相的跨域操作。

标签:cookie,存储,缓存,浏览器,跨域,sessionStorage,JS,三种,localStorage
From: https://www.cnblogs.com/yueyiviolet/p/16646169.html

相关文章

  • vue项目中main.js使用方法详解
    vue项目中main.js使用方法详解目录第一部分:main.js文件解析第二部分:Vue.use的作用以及什么时候使用Vue.use是什么?(官方文档)Vue.use()什么时候使用?补充:关于main.js方便小技......
  • jsp基础语法和指令
    javabeanMVC三层架构filter......
  • springboot整合redis,设置缓存过期时间
    注:redis服务器要先开启!或者连接远程服务器上的Redis,但是依然要开启服务,不然会一直TimeOut!Pom文件添加依赖<dependency><groupId>org.springframework.boot</......
  • fastjson版本替换升级脚本
    fastjson漏洞修复脚本脚本说明fastjson_update.sh:对指定目录下的fastjsonjar包进行备份、升级、还原。使用帮助上传到项目外任意目录下并解压并赋予执行权限(如/......
  • 20个实用的js小技巧
    //1滚动到页面顶部window.scrollTo()平滑滚动到页面顶部constscrollToTop=()=>{window.scrollTo({top:0,left:0,behavior:'smooth'}......
  • nodejs base64 编码解码
    一、普通字符串编码varb=newBuffer('JavaScript');vars=b.toString('base64');//SmF2YVNjcmlwdA==解码:varb=newBuffer('SmF2YVNjcmlwdA==','base64')......
  • js操作技巧
    //返回多个数据可以用数据的形式functiondivision(dividend,divisor){varquotient=dividend/divisor;vararr=[dividend,divisor,quotient]ret......
  • 与 JSX 反应
    与JSX反应大家好。今天我想谈谈JSX。ĴSX是源自JavaScript和XML首字母的首字母缩写词。JSX的主要目的是通过在javascript文件中编写HTML代码来提供更直......
  • 2行JS代码实现Vue全选和反选
    实现效果:第一行:子选项的选中状态等于全选框的状态this.letters.forEach(item=>item.check=this.checkAll)第二行:使用数组every方法的特性,数组的每一项均满......
  • js创建二维数组
    js创建二维数组的方法:方法一:直接设置letarr=[];arr[0]=[1,2,3,4,5,6];arr[1]=[10,20,30,40,50,60]方法二: fill+一个for循环letarr=newArray(1......