cookie、Web Storage

前端知识汇编

  • 1. cookie
    • 1.1 cookie的限制
    • 1.2 cookie的构成
    • 1.3 JavaScript中的cookie
    • 1.4 子cookie
    • 1.5 使用cookie的注意事项
  • 2. Web Storage
    • 2.1 Storage类型
    • 2.2 sessionStorage对象
    • 2.3 localStorage对象
    • 2.4 存储事件
    • 2.5 限制

1. cookie

cookie是客户端与服务器端进行会话时使用的一个能够在浏览器本地化存储的技术

1.1 cookie的限制

  • 与特定域绑定,不被其他域访问,保证它不会被恶意利用
  • 存储大小有限制,每个cookie不超过4kb(超出静默删除)
  • 存储数量有限制,不同浏览器不同限制数量(一般每个域不超过50个在任何浏览器就能兼容;Safari和Chrome没有硬性限制)

1.2 cookie的构成

  • 名称:唯一标识cookie的名称。不区分大小写,但为了兼容一些服务器软件最好保持区分大小写不同名。
  • 值:存储在cookie里的字符串值。
  • 域:cookie有效的域。发送到这个域的所有请求都会包含对应的cookie。
  • 路径:请求URL中包含这个路径才会把cookie发送到服务器。
  • 过期时间:表示何时删除cookie的时间戳。GMT格式。
  • 安全标识:设置之后,只有使用SSL安全连接(https)的情况下才会把cookie发送到服务器。

1.3 JavaScript中的cookie

    • BOM的document.cookie返回包含页面中所有有效的cookie的字符串(根据域、路径、过期时间和安全设置);
    • 所有名和值都是URL编码,需要使用decodeURIComponent()解码;
    • 通过document.cookie可以设置新的cookie字符串,不会覆盖之前的cookie,除非设置的是已有的cookie
    • 设置cookie时只有cookie名和值是必须的
document.cookie = `${name}=${value};${expires}=${expiration_time};${path}=${domain_path};${domain}=${domain_name};${secure};`
  • 读取
    通过保存格式去解析document.cookie返回的字符串
  • 删除
    只需要把cookie的过期时间设为过去就能自动删除

1.4 子cookie

子cookie是在单个cookie存储的小块数据,本质上是使用cookie的值在单个cookie中存储多个键值对,来绕过浏览器对每个域cookie数的限制。
如:

name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5&name6=value6

1.5 使用cookie的注意事项

  • 有一种HTTP-only的cookie可以在浏览器和服务器上设置,但只能在服务器上读取,js无法取得这种cookie的值
  • 所有cookie都会作为请求头部由浏览器发送给服务器,所以cookie越大,请求完成的时间越长,需要考虑性能问题
  • cookie不是保存在安全的环境中的,不要在cookie中保存敏感信息

2. Web Storage

Web Storage提供在cookie之外的存储会话数据的途径,提供跨会话持久化存储大量数据的机制。分为localStorage永久存储机制对象和sessionStorage跨会话存储机制对象。

2.1 Storage类型

Storage类型用于保存名/值对数据,存储上限有浏览器决定。方法:

  • clear():删除所有值;不在firefox中实现。
  • getItem(name):取得给定name的值。
  • key(index):取得给定位置的名称(不是值)。
  • removeItem(name):删除给定name的名/值对。
  • setItem(name, value):设置给定name的值。

Storage只能保存字符串类型,非字符串类型会自动转为字符串,在存取时要注意数据类型变化。

2.2 sessionStorage对象

  • sessionStorage对象只存储会话数据,浏览器关闭时数据就会清掉。
  • 因为sessionStorage对象与服务器会话紧密相关,所以在运行本地文件时不能使用。
  • 现代浏览器用同步阻塞的方式存储数据;老版IE用异步的方式实现数据写入,会导致给数值赋值的时间和数据写入磁盘的时间存在延迟(少量数据时可以忽略不计),在IE8中可以在数据赋值前调用begin()、之后调用commit()方法来强制坚数据写入磁盘。

2.3 localStorage对象

  • 要访问同一个localStorage对象,页面必须来自用一个域(子域不可)、在相同的端口上使用相同的协议
  • 存储在localStorage中的数据会保留到通过js删除或用户清空浏览器缓存。不会因为页面刷新、关闭窗口、标签页或重启浏览器而丢失。

2.4 存储事件

当Storage对象发生变化时(不区分sessionStorage和localStorage),都会在文档上触发storage事件。这个时间对象有以下4个属性:

  • domain:存储变化对应的域
  • key:被设置或删除的值
  • newValue:键被设置的心智,若键被删除则为null
  • oldValue:键变化之前的值
    可以用以下代码监听到:
window.addEventListener("storage",(event) => console.log(event)
)

2.5 限制

  • 客户端数据的大小限制是按照每个源(协议、域、端口)来设置的,因此每个源有固定大小的数据存储空间。
  • 不同浏览器给localStorage和sessionStorage设置了不用的空间限制,但大多是会限制为每个源5MB

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

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

相关文章

自写代码来理解 get_global_id 和 get_global_size

<2022-01-24 周一> 《OpenCL编程指南》第三章 自写代码来理解get_global_id和get_global_size 使用本书第三章中关于输入信号卷积的代码来进行理解&#xff0c;见随书代码“src/Chapter_3/OpenCLConvolution”&#xff0c;附代码如下&#xff1a; // // Book: O…

webpack打包可视化分析工具:webpack-bundle-analyzer

在对webpack项目进行优化的时候,可以使用webpack-bundle-analyzer这个可视化插件来快速分析我们包的结构,能快速定位需要优化的地方,对开发者非常友好 下载安装 下载依赖包 npm i webpack-bundle-analyzer 使用 const BundleAnalyzerPlugin require(webpack-bundle-analy…

qt.qpa.plugin: Could not find the Qt platform plugin “windows“ in ““

系统环境&#xff1a;Win10家庭中文版 Qt : 5.12.9 链接了一些64位的第三方库&#xff0c;程序编译完运行后出现 qt.qpa.plugin: Could not find the Qt platform plugin "windows" in "" 弹窗如下&#xff1a; 网上搜了一些都是关于pyQt的&#xff0c…

【实战记录】 vagrant+virtualbox+docker 轻松用虚拟机集成组件

用途 最近要学一大堆组件&#xff0c;不想直接安装本机上&#xff0c;然后gpt说&#xff1a;你可以用vagrant起个虚拟机&#xff08;然后docker拉取各种组件的镜像&#xff09;&#xff1b;或者k8s 实战的整体思路 首先安装virtualbox和vagrant。然后cmd依次键入三条命令 安…

负载均衡 LoadBalancer

负载均衡 负载均衡一般分为服务端负载均衡和客户端负载均衡 服务端负载均衡&#xff1a; 指在服务器端进行负载均衡的策略。在这种策略下&#xff0c;负载均衡器位于服务器端&#xff08;如 Nginx&#xff09;&#xff0c;当客户端发起服务调用时&#xff0c;根据服务器的负…

旧衣回收小程序搭建:降低企业成本,提高回收效率!

在人们环保意识提升下&#xff0c;旧衣回收行业受到了大众的关注&#xff0c;同时旧衣回收具有门槛低、利润大的优势。在我国&#xff0c;回收行业不仅帮助普通人就业获利&#xff0c;还对环保做出了较大贡献。因此&#xff0c;旧衣回收行业成为了当下的热门商业模式&#xff0…

时尚女童冲锋衣外套

上身时尚又好看的外套 日常穿着或者出行游玩 应对早晚温差&#xff0c;兼具时尚和功能 保暖也可以很轻盈 率性闲适的洒脱范 版型百搭好穿 下摆有橡筋收紧更加保暖了 简直就是一件实用与时尚并存的时尚单品

Swift爬虫程序采集招聘信息代码示例

今天我将用Swift写一个爬虫程序&#xff0c;主要是爬取招聘信息网站得。我们知道Selenops是一个简单的Swift Web爬虫工具&#xff0c;可以用于爬取网页内容。您可以使用Selenops的三种方式之一来进行爬虫操作&#xff1a;Swift游乐场、Swift脚本或马拉松脚本SwiftUI是一种用于构…

linux nginx配置链接访问图片

nginx 安装 sudo apt update sudo apt install nginxnginx 启动命令 sudo systemctl restart nginx # 重启 sudo systemctl start nginx #开启 sudo systemctl stop nginx # 关闭 sudo systemctl status nginx # 状态 sudo systemctl restart nginx.service #重启nginx安装成…

SEM优化三种方式

百度搜索引擎优化的三种方式 大搜&#xff1a;关键词推广&#xff0c;投入产出比更好百益&#xff1a;图片广告&#xff0c;这些图片广告会出现在站长的网站上&#xff0c;比如小说的网站上&#xff0c;用户点击图片了就会从账户里扣钱信息流&#xff1a;转化低&#xff0c;一…

100个实战项目——在树莓派4B+Ubuntu20.04桌面版配置下运行智能小车(一)

主机SSH远程链接从机 查看python版本 python 我的是python3.8 所以我需要安装pip3 sudo apt install python3-pip 接着安装程序需要的引脚库 sudo pip3 install RPi.GPIO 注意必须要有sudo&#xff0c;因为我是远程遥控的树莓派&#xff0c;没有权限运行程序&#xff0…

前端生成CRC16

一、代码 /**CRC16检验 用例&#xff1a;CRC.ToModbusCRC16(FF2233FF)*/ var CRC {}; CRC._auchCRCHi [0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41, 0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x00, 0xC1, 0x81, 0x40, 0x00, 0xC1, 0…

如何进行时间管理 待办事项软件帮你成为时间管理大师

在这个快节奏的现代社会&#xff0c;时间显得格外宝贵。每个人都在与时间赛跑&#xff0c;试图在有限的时间里完成更多的事情。我曾经也深陷于这样的困境&#xff0c;每天都被无数的杂事裹挟着&#xff0c;仿佛永远都抓不住时间的尾巴。 那时&#xff0c;我常常感到焦虑和疲惫…

操作系统详解(5.2)——信号(Signal)的题目进阶

系列文章&#xff1a; 操作系统详解(1)——操作系统的作用 操作系统详解(2)——异常处理(Exception) 操作系统详解(3)——进程、并发和并行 操作系统详解(4)——进程控制(fork, waitpid, sleep, execve) 操作系统详解(5)——信号(Signal) 操作系统详解(5.1)——信号(Signal)的相…

SpringMVC mss整合

建库建表 CREATE TABLE account (id int(11) NOT NULL AUTO_INCREMENT,name varchar(20) DEFAULT NULL,money double DEFAULT NULL,PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8;首先 &#xff1a;先创建一个工程 其次添加配置&#xff1a; pom.xml <?xml vers…

MySQL进阶45讲【1】基础架构:一条SQL查询语句是如何执行的?

1 前言 我们经常说&#xff0c;看一个事儿千万不要直接陷入细节里&#xff0c;应该先鸟瞰其全貌&#xff0c;这样能够帮助你从高维度理解问题。同样&#xff0c;对于MySQL的学习也是这样。平时我们使用数据库&#xff0c;看到的通常都是一个整体。比如&#xff0c;有个最简单的…

JavaScript类型检测【全】

类型检测的方法&#xff1a; typeofinstanceofObject.prototype.toStringconstructor typeof typeof 操作符返回一个字符串&#xff0c;表示未经计算的操作数的类型。 typeof undefined; // "undefined"typeof null; // "object"typeof 100; // "…

幽默爆笑面试法

以下是以一种幽默的方法来面试。 大家好&#xff0c;我是程序员的“面试大师”小G&#xff0c;今天我将揭示程序员必备的面试技巧&#xff0c;不仅让你技能满分&#xff0c;笑料更是足够让面试官笑到合不拢嘴&#xff0c;毕竟幽默感也是程序员的一项利器。 语言基础&#xff1…

15.【TypeScript 教程】类型保护

TypeScript 类型保护 本节介绍的类型保护 TypeScript 类型检查机制的第二个部分&#xff0c;我们可以通过 typeof、instanceof、in 和 字面量类型 将代码分割成范围更小的代码块&#xff0c;在这一小块中&#xff0c;变量的类型是确定的。 1. 解释 类型保护是指缩小类型的范围…

锐意进取,蓬勃发展|爱基百客2023全景图

岁序更迭&#xff0c;2023年已悄然离去。对我们来说&#xff0c;这是充满挑战与机遇的一年。爱基百客作为一家专注于测序服务的公司&#xff0c;我们在这一年里经历了许多挑战&#xff0c;也取得了令人鼓舞的成绩。前面我们盘点了表观产品和单细胞产品&#xff0c;今天再邀您回…