JavaScript全解析——本地存储✔(localStorage~sessionStorage~cookie)

news/2024/11/17 15:49:58/文章来源:https://www.cnblogs.com/mahmud/p/18304168

●就是浏览器给我们提供的可以让我们在浏览器上保存一些数据
●常用的本地存储
(localStorage~sessionStorage~cookie)

1-localStorage

=> 特点:

-> 长期存储,除非手动删除否则会一直保存在浏览器中 清除缓存或者卸载浏览器也就没有了
-> 可以跨页面通讯, 也就是说在一个页面写下在另一个页面可以读取

=> 保存

-> 语法: window.localStorage.setItem(名字,值)
-> 注意: 只能保存字符串类型的数据,其它数据类型不能被保存

=> 获取

-> 语法: window.localStorage.getItem(名字)
-> 注意: 保存的是字符串类型,取出来的也是字符串类型

-> 返回值:

如果localStorage 中有这条数据 拿到的就是这个条数据的值

如果localStorage 中没有这条数据 拿到的就是 null

=> 删除

-> 语法: window.localStorage.removeItem(名字)
-> 作用: 就是删除localStorage中该条数据

 
// 保存
var num = 200
window.localStorage.setItem('a', num)
// 获取
var res = window.localStorage.getItem('b')
console.log(res);
console.log(typeof res);
// 删除
window.localStorage.removeItem('a')

2- sessionStorage

=> 特点:

-> 会话存储,就是浏览器关闭就没有了
-> 可以跨页面通讯(有要求)
-> 要求:必须是本页面跳转才可以

=> 保存

-> 语法: window.sessionStorage.setItem(名字,值)
-> 注意: 只能保存字符串类型的数据,其它数据类型不能被保存

=> 获取

-> 语法: window.sessionStorage.getItem(名字)
-> 注意: 保存的是字符串类型,取出来的也是字符串类型

-> 返回值:

如果 sessionStorage 中有该条数据 获取到的就是该条数据的值

如果 sessionStorage 中没有该条数据 拿到的就 null

=> 删除
-> 语法: window.sessionStorage.removeItem(名字)
-> 作用: 就是删除 sessionStorage 中的这条数据
// 保存
window.sessionStorage.setItem('a', 300)
// 获取
var res = window.sessionStorage.getItem('a')
console.log(res);
console.log(typeof res);
// 删除
window.sessionStorage.removeItem('a')

3- cookie

特点:

只能存储字符串, 有固定的格式
=> key=value; key2=value2; key3=value3

cookie 存储大小有限制
=> 4KB 左右

存储的时效性
=> 默认是会话级别时效, 可以手动设置过期时间

操作必须依赖服务器
=> 本地打开的页面是不能操作 cookie
=> 也就是存存不上 , 读读不出来
=> 要求页面必须在服务器打开

跟随前后端请求自动携带
=> 只要 cookie 空间中有内容的时候
=> 会在该页面和后端交互的过程中自动携带

前后端操作
=> 前端可以使用 JS 来操作
=> 任何一个后端语言都可以操作

存储依赖域名
=> 哪一个域名存储, 哪一个域名使用
=> 不能跨域名通讯

cookie 的操作

设置一条 cookie
●语法: document.cookie = 'key=value'

// 设置一条 cookie
// 设置了一条叫做 a 的 cookie 存储的值是 100
document.cookie = 'a=100'
// 设置了一条叫做 b 的 cookie 存储的值是 200
document.cookie = 'b=200'// 设置一条带有过期时间的 cookie
var time = new Date()
document.cookie = 'a=100;expires=' + time
// 设置一条 30s 以后过期的 cookie
var time = new Date()
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * 30)
// console.log(time)
document.cookie = 'a=100;expires=' + time
获取 cookie

●语法: document.cookie
● 返回值: 完整的 cookie 字符串

console.log(document.cookie)

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/744343.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三种交换方式的比较

一、互联网的核心部分 网络核心部分是互联网中最复杂的部分。 网络中的核心部分要向周围网络边缘的大量主机提供连通性,使边缘部分任何一个主机都能够向其他主机通信。 在网络核心部分起特殊作用的是路由器。 路由器是实现分组交换的关键构件,其任务是转发收到的分组,这是网…

gateway 使用细节

spring:cloud:gateway:routes:- id: test_my_provider # 自定义,全局唯一即可uri: http://localhost:8081 # 实际调用的地址predicates:- Path=/test/** # 请求匹配规则- id: test_my_consumeruri: http://localhost:8082predicates:- Path=/feign/**上一篇文章 gateway 快速入…

长链剖分笔记

与轻重链剖分相似. dfs1:高度 \(h\)、\(son\);dfs2:\(top\). 性质 1:到根最多 \(O(\sqrt n)\) 条轻边. (证明:长链长度最坏情况:1, 2, 3...) 性质 2:\(x\) 的 \(k\) 级祖先 \(y\) 所在的长链长度 \(\ge k\).(证明:若非,则 \(y-x\) 是一条更长的链,矛盾.) 树上 \(…

【漏洞分析】DoughFina 攻击事件分析:不做任何参数检查的去杠杆合约

背景介绍 2024 年 7 月 12 日,DoughFina 协议遭受了黑客攻击,造成本次攻击的主要原因是 ConnectorDeleverageParaswap 合约没有对输入参数进行检查,且该合约为 DSA 合约的 owner。攻击者可以构造恶意参数窃取 DSA 合约的资金。 攻击交易 https://app.blocksec.com/explorer/…

SpringCloud启动报错Did you forget to include spring-cloud-starter-loadbalancer?

当我在gateway项目中添加了feign依赖时,报错:   原因:因为在springcloudFeign在Hoxton.M2 RELEASED版本之后就不再使用Ribbon而是使用spring-cloud-loadbalancer,所以不引入spring-cloud-loadbalancer会报错解决办法:引入依赖即可1 <dependency> 2 …

圆方树

一些概念 割点:无向图中,若删除点x及其连边,连通块变多,那么x为割点。 点双连通:若点对x和y,删除任意非x和非y节点后,x和y仍然联通,称x和y点双连通。 点双联通子图:无向图中的一个子图G,G中任意两点都是点双连通的,那么G为原图的一个点双连通子图。 点双联通分量:无…

链表引用——约瑟夫问题

约瑟夫问题Josephu问题为:设编号为1,2,...n的n个人围坐一圈,约定编号为k(1<=k<=n)的人从1开始报数,数到m的那个人出列,它的下一位又从1开始报数,数到m的那个人又出列,依次类推,直到所有人出列为止,由此产生一个出队编号的序列。提示:用一个不带头结点的循环…

LogRotate 切割 Nginx 日志

发布于 2023-12-04 10:20:327140举报文章被收录于专栏:码农UP2U一直以来做日志切割都是使用 shell + crontab 来搞,shell 脚本可以在网上找到各种版本的,改改就用了,懒省事。这样的做法很传统,却忽略了系统的给我们提供的优秀的工具 —— logrotate。 一、Logrotate 是什么…

SQL Server中Upsert的三种方式(转载)

本文介绍了SQL Server中Upsert的三种常见写法以及他们的性能比较。SQL Server并不支持原生的Upsert语句,通常使用组合语句实现upsert功能。假设有表table_A,各字段如下所示:int型Id为主键。方法1:先查询,根据查询结果判断使用insert或者updateIF EXISTS (SELECT 1 FROM ta…

2024/7/15 模拟赛 记录

noip NOI plus!几乎全员爆蛋( 本来能拿T1 20pts 暴力分的,但是居然CE了!!! max里两个参数,一个int一个longlong dev居然没报!!!光荣爆蛋(我估计是全场唯一一个没过编的:( 题解已存至网盘 https://fzoishare.xndxfz.com:7123/

[考试记录] 2024.7.15 csp-s模拟赛4

2024.7.15 csp-s模拟赛4 T1 传送带 题面翻译 有一个长度为 \(n\) 的一维网格。网格的第 \(i\) 个单元格包含字符 \(s_i\) ,是“<”或“>”。当弹球放在其中一个格子上时,它会按照以下规则移动: 如果弹球位于第 \(i\) 个格子上且 \(s_i\) 为 <,则弹球在下一秒会向左…

图论连通性

【学习笔记】图论连通性啊啊啊啊啊! 先引用一篇犇的:))) 缩点 弱连通: 对于有向图中两点 \(x\) 和 \(y\),它们在所有边为无向时存在一个环使它们相连。 强连通: 对于有向图中两点 \(x\) 和 \(y\),存在一个环使它们相连。 强连通子图: 对于有向图 \(G = (V, E)\),如果…