【JS红宝书学习笔记】第25章 客户端存储

news2024/11/14 4:51:13

第25章 客户端存储

Cookie

HTTP是无状态的,也就是说,你这次访问服务器,关闭后再次访问服务器,服务器是意识不到又是你来访问的。
登录时,浏览器需要帮我们在每一次请求里加入用户名和密码,这样才能做到保持登录
可以实现每次http请求都自动带数据给服务器的技术——cookie
域、路径、过期时间和 secure 标志用于告诉浏览器什么情况下应该在请求中包含 cookie。这些参数并不会随请求发送给服务器,实际发送的只有 cookie 的名/值对。
cookie的基本流程:
在这里插入图片描述
cookie就是一种存储在浏览器的数据而已,需要在http协议环境下才能使用
优点:兼容性好,请求头自带cookie
缺点:打开浏览器,可以看到保存了哪些cookie,所以很不安全;数据体积小
使用:
创建cookie: 使用document.cookie属性来设置cookie的值,并指定cookie的名称、值、过期时间等信息。(名称和值必需)
设置 cookie 的格式如下:

name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
document.cookie = "color=red; expires="+(new Date("2024-7-14"));
document.cookie = "宽度=100px; expires="+(new Date("2024-7-14"));
document.cookie = "height=200px; expires="+(new Date("2024-7-14"));

删除cookie: 通过将cookie的过期时间设置为过去的时间来删除cookie。

document.cookie = "color=; expires="+(new Date("1970-1-1"));
document.cookie = "width=; expires="+(new Date("1970-1-1"));

获取cookie: 通过解析document.cookie属性的值来读取cookie的内容。

var str = document.cookie;
console.log("缓存的数据:",str);

**修改cookie:**修改cookie的内容可以通过重新设置相同名称的cookie来实现。

 document.cookie = "color=blue; expires="+(new Date("1970-1-1"));

Session会话
浏览器和服务器是在进行会话的,那么浏览器访问服务器就是会话的开始
但是会话结束的时间比较模糊,因为关掉网页可能只是按错而已
因此不同的网站对于每个用户的会话都设定了时间(结束会话的时间)以及唯一的ID(Session ID,一串没有规律的字符串)
服务器自己定义的东西一般会保存在数据库里面
在这里插入图片描述

Web Storage

Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用 cookie 的问题。eb Storage 的第 2 版定义了两个对象:localStorage 和 sessionStorage。localStorage 是永久存储机制,sessionStorage 是跨会话的存储机制。
SessionStorage 和 LocalStorage 使用方法基本一致,唯一不同的是,一旦关闭页面,SessionStorage 将会删除数据。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

SessionStorage

只存储会话数据,浏览器关闭时数据会消失。但是页面刷新时不受影响,页面崩溃重启后恢复。
在这里插入图片描述
在这里插入图片描述

LocalStorage

存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。数据不受页面刷新影响,也不会因关闭窗口、标签页或重新启动浏览器而丢失。
优点:操作方便,永久存储,兼容性较好
缺点: 保存值的类型限定,浏览器在隐私模式下不可读取,不能被爬虫

IndexDB

类似于 SQL 数据库的结构化数据存储机制。IndexedDB 存储的是对象,而不是数据表。对象存储是通过定义键然后添加数据来创建的。游标用于查询对象存储中的特定数据,而索引可以针对特定属性实现更快的查询。
IndexedDB 背后的思想是创造一套 API,方便 JavaScript 对象的存储和获取,同时也支持查询和搜索。
H5标准存储方式,他是以键值对进行存储,可以快速读取,适合web场景
什么情况下适合使用 IndexedDB?
存储大量数据的应用程序
不需要持久 Internet 连接仍可工作的应用程序

Web SQL

2010年被W3C废弃的本地数据库数据存储⽅案,但是主流浏览器(火狐除外)都已经有了相关的实现,web sql类似于SQLite,是真正意义上的关系型数据库,⽤sql进行操作,当我们用JavaScript时要进行转换, 较为繁琐。

☆☆☆总结一下:

前端数据存储有5种方式:
(1)cookie:为了解决HTTP协议的无状态问题(也就是每次访问服务器关闭后再次访问,不能意识到是同一用户),一种每次HTTP请求自动带数据的技术。兼容性好。
但是只能存储少量数据,且打开浏览器就能看到很不安全
(2)localstorage:本地存储,永久存储,数据不受页面刷新、关闭的影响
(3)sessionstroage:会话存储,页面关闭数据清空
(4)indexDB:类似SQL数据库存储,但存储的是对象。适用于需要存储大量数据的应用程序和不用网络连接的应用程序。
(5)Web SQL:关系型数据库,使用要用JS转换,较为繁琐

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

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

相关文章

(WRF-UCM)高精度城市化气象动力模拟

气候变化及应对是政府、科学界及商业界关注的焦点。气候是多个领域(生态、水资源、风资源及碳中和等问题)的主要驱动因素,合理认知气候变化有利于解释生态环境变化机理及过程,而了解现在、未来气候变化则是进行生态、环境及能源评…

Win11鼠标卡顿 - 解决方案

问题 使用Win11系统使,鼠标点击任务栏的控制中心(如下图)时,鼠标会有3秒左右的卡顿,同时整个显示屏幕也有一定程度的卡顿。 问题原因 排除鼠标问题:更换过不同类型的鼠标,以及不同的连接方式…

【计算机毕业设计】学生心理咨询评估系统设计与实现【源码+lw+部署文档】

包含论文源码的压缩包较大,请私信或者加我的绿色小软件获取 免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者…

[BJDCTF2020]EzPHP1

知识点:1. url编码绕过 2. %0a绕过 3. post优先级绕过 4. php伪协议 5. 数组的强类型比较绕过 6. 取反绕过 进入之后发现了一个很帅气的页面😎~ 看看网页源代码试试~ 是base32编码,尝试一下解码. https://www.qqxiuzi.cn/bianma/base.php 解…

qt 创建一个左侧边线拖拽的矩形

1.概要 2.代码 2.1 代码第一版 在Qt中&#xff0c;要创建一个可以向左侧拖拽边线的矩形&#xff0c;你需要自定义一个QGraphicsRectItem的子类&#xff0c;并重写其事件处理函数来响应鼠标的拖拽动作。以下是一个简单的实现示例&#xff1a; #include <QApplication>…

DHCP服务、FTP服务

一、DHCP 1.1 DHCP是什么 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff0c;动态主机配置协议&#xff09;是一种网络协议&#xff0c;用于自动分配 IP 地址和其他网络配置信息给网络中的设备 1.2 DHCP的好处 自动化: 减少了手动配置 IP 地址和网络参数的工…

C++客户端Qt开发——常用控件(多元素控件)

5.多元素控件 Qt中提供的多元素控件有&#xff1a; QListWidget QListView QTablewidget QTableview QTreewidget QTreeview xxWidget和xView之间的区别 以QTableWidget和QTableView为例. QTableView是基于MVC设计的控件.QTableView自身不持有数据.使用QTableView的时候需要…

【密码学】密码学数学基础:剩余系

不得不啃的密码学数学基础之剩余系是个啥&#xff1f;数学里面有好多的定义都有前置的数学概念&#xff0c;要想弄懂剩余系还得先说说“同余”。 一、同余 那么“同余”有是个什么呢&#xff1f;在谈论“同余”之前&#xff0c;我们先圈定个讨论的范围。接下来讨论的都是整数集…

PyTorch Autograd内部实现

优化&#xff1a;如果is_leafFalse&#xff0c;则说明不需要该Tensor的grad&#xff0c;所以&#xff0c;grad_fn直接将output梯度传递给下一个grad_fn了&#xff0c;绕开对该Tensor的grad的更新&#xff1b;

C语言 | Leetcode C语言题解之第235题二叉搜索树的最近公共祖先

题目&#xff1a; 题解&#xff1a; struct TreeNode* lowestCommonAncestor(struct TreeNode* root, struct TreeNode* p, struct TreeNode* q) {struct TreeNode* ancestor root;while (true) {if (p->val < ancestor->val && q->val < ancestor-&g…

信息系统项目管理师(高项)—学习笔记二

第一章 以下是上一篇&#xff08;信息系统项目管理师&#xff08;高项&#xff09;—学习笔记&#xff09;的续写&#xff0c;因为是之前记录的&#xff0c;这一篇还是细致到每一个小节的内容&#xff0c;有些过于复杂了&#xff0c;后续会简化~ 1.3 现代化创新发展 党的十九…

干货丨ChatGPT高阶玩法(上)

正文共1321字 预计阅读时间4分钟 是的,你没有看错,上面这段这么像人写的内容其实是由ChatGPT这个机器人AI生成的(我只稍加修改了几个字),发送下面第一个提示词口令,然后加以进一步引导并不断改进就可以得到你想要的结果,具体操作见文中图片。 使用说明 以下【】里的内…

Unable to obtain driver using Selenium Manager: Selenium Manager failed解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

《Windows API 每日一练》10.1 模态对话框

对话框分“模态”和“非模态”两种&#xff0c;其中模态对话框最为常见。当程序显示一个模态对话框时&#xff0c;用户不能在对话框和该程序的其他窗口之间进行切换。用户必须先明确地终止该对话框。这通常由单击OK或Cancel按钮来实现。但是当对话框正在显示时&#xff0c;用户…

[Linux]基本指令(二)

一些剩下的指令部分 mv指令&#xff08;重要&#xff09; mv 命令是 move 的缩写&#xff0c;可以用来移动文件或者将文件改名&#xff08; move (rename) files &#xff09;&#xff0c;是 Linux 系统下常用的命令&#xff0c; 经常用来备份文件或者目录。 语法 : mv [ 选项…

京东.Vision首登苹果Vision Pro 背后的技术探索

去年6月&#xff0c;苹果正式发布首款头显设备Apple Vision Pro&#xff0c;今年6月28号&#xff0c;Apple Vision Pro正式在中国发售。京东.Vision作为首批原生应用登陆Vision Pro平台&#xff0c;首期以家电家居与潮流数码产品作为切入口&#xff0c;未来将逐步拓展至全品类&…

基于 jenkins 部署接口自动化测试项目!

引言 在现代软件开发过程中&#xff0c;自动化测试是保证代码质量的关键环节。通过自动化测试&#xff0c;可以快速发现和修复代码中的问题&#xff0c;从而提高开发效率和产品质量。而 Jenkins 作为一款开源的持续集成工具&#xff0c;可以帮助我们实现自动化测试的自动化部署…

python编程:从入门到实践(第三版) 笔记

文章目录 资源网站:https://www.ituring.com.cn/book/3038配置VSCode推荐资源网站推荐资源网址 资源网站:https://www.ituring.com.cn/book/3038 配置VSCode 推荐资源网站 推荐资源网址 英文版主页&#xff1a; https://ehmatthes.github.io/pcc_3e 中文版主页&#xff1a; h…

【人工智能】Transformers之Pipeline(二):自动语音识别(automatic-speech-recognition)

​​​​​​​ 目录 一、引言 二、自动语音识别&#xff08;automatic-speech-recognition&#xff09; 2.1 概述 2.2 技术原理 2.2.1 whisper模型 2.2.2 Wav2vec 2.0模型 2.3 pipeline参数 2.3.1 pipeline对象实例化参数​​​​​​​ 2.3.2 pipeline对象使用参数…

MFC程序创建word,创建表格,写入数据

文章目录 1、MFC程序功能&#xff1a;2、MFC程序实现2.1 创建项目2.2 添加word操作类2.3 添加word资源2.4 编写代码&#xff0c;实现将数据写入到word2.5 运行程序、验证功能3、工程代码下载 1、MFC程序功能&#xff1a; 创建word文档&#xff1b;向文档中写入字符串&#xff…