cookie、Web Storage

这篇具有很好参考价值的文章主要介绍了cookie、Web Storage。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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个属性:文章来源地址https://www.toymoban.com/news/detail-794029.html

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

2.5 限制

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

到了这里,关于cookie、Web Storage的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】Cookie, Session,Token和JWT的发展及区别(上)

    五一假期第3天,2023年5月1日继续打卡分享自己的前端笔记😜,今天就分享我关于Cookie, Session,Token和JWT的相关笔记和理解吧。 本文为原创,未经同意请勿转载 由于篇幅有点长😂,所以笔者将我关于这部分的笔记分为四个篇章(文章开头后面附录上下篇链接),避免读者的阅

    2024年02月02日
    浏览(40)
  • 学习web入门知识汇总

    第一章 WEB简介 web流程:输入网站访问网站之后向服务器发送请求,与数据库交互后经服务器返回请求结果,返回给用户。 浏览器工作原理:通过域名获取web服务器IP地址(DNS解析);访问web服务器。 web主要用到的技术:html、javescript、css. URL的详细格式:schema://host[:port#]/p

    2024年02月07日
    浏览(43)
  • Web前端面试题目汇总

    HTML/CSS部分 1、什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只

    2024年02月10日
    浏览(43)
  • Web前端阿里等大厂面试题汇总,Web核心技术之JSP(过时技术),前端音频框架

    jstl jstl 1.2 taglibs standard 1.1.2 org.apache.tomcat.maven tomcat7-maven-plugin 2.2 8.1.2 创建包 创建不同的包结构,用来存储不同的类。包结构如下 8.1.3 创建表 – 删除tb_brand表 drop table if exists tb_brand; – 创建tb_brand表 create table tb_brand ( – id 主键 id int primary key auto_increment, – 品牌名称 brand_n

    2024年04月16日
    浏览(59)
  • Vue3+Vite前端知识汇总1篇

       目录 1、设置package.json,让编译完成后自动打开浏览器。 2、设置vite.config.ts,设置src别名,后面就不用 ../../../ 了。 3、安装@types/node  解决vscode显示红波浪线问题。  4、安装 sass和reset.css 5、创建并引入全局组件,HospitalTop 6、安装路由,并添加切换路由后滚动到顶部功能

    2024年02月16日
    浏览(45)
  • 【HTTP】URL结构、HTTP请求和响应的报文格式、HTTP请求的方法、常见的状态码、GET和POST有什么区别、Cookie、Session等重点知识汇总

    目录 URL格式 HTTP请求和响应报文的字段? HTTP请求方法 常见的状态码 GET 和 POST 的区别 Cookie 和 Session ? :是用来分割URL的主体部分(通常是路径)和查询字符串(query string)查询字符串是一组键值对的参数 query string :是键值对的结构,分割键值对,=分割键和值 Content-Type

    2024年02月07日
    浏览(51)
  • Web Storage是什么?Web Storage详解

    Web Storag是HTML5引入的一个非常重要的功能,可以将数据存储在本地,如保存用户的偏好设置、复选框的选中状态、文本框默认填写的值等。用户在浏览器中刷新网页时,网页通过Web Storage就可以知道用户之前所做的一些修改,而不需要将用户修改的内容存储在服务器端。 Web

    2024年02月07日
    浏览(35)
  • web存储(Storage)

    目录 1、基本概念 2、功能监测 2.1 测试可用性 2、W3C标准 3、基本方法或属性 4、 Local Storage 4.1 描述 4.2 示例 5、sessionStorage 5.1 描述 5.2 示例 6、StorageEvent(存储事件) 6.1 构造函数 6.2 实例属性 6.3 实例方法 6.4 响应存储的变化 Web Storage API 提供了存储机制,通过该机制,浏览器

    2024年02月09日
    浏览(35)
  • 【web前端基础之HTML】——HTML基本知识

    hn 元素用于HTML文件的标题输出,一行只显示一个(块元素),具有换行输出和加粗的效果。n的值是1~6,代表6个级别标题,1字号最大,随数字增大字号减小。 案例:demo1.html⬇️ 效果图⬇️ br 是个单标签,没有 结束标记,主要功能是让文字换行输出。 案例:demo2.html⬇️ 效

    2023年04月19日
    浏览(55)
  • HTML5 Web Storage学习

    web Storage是html5新增的数据存储方法,它与cookie之间的区别在于, 存储空间:cookie 的大小被限制在 4KB,Storage大小一般为 5~10MB,与具体浏览器有关; 网络消耗:只要涉及 cookie 请求都会携带cookie数据,消耗网络的带宽,Storage不会自动发送到服务器; 使用方面:Storage 提供了更

    2024年02月12日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包