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

第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.mzph.cn/pingmian/46722.shtml

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

相关文章

Supervised Contrastive Learning

paperhttps://arxiv.org/abs/2004.11362githubhttps://github.com/HobbitLong/SupContrast个人博客位置http://myhz0606.com/article/SupCon 1 Motivation 经典的自监督对比学习方法以instance discrimination作为pretext task。在这种方法中,会对batch的图片进行…

【书生大模型实战】L0-Git 基础知识

一、关卡任务 任务1: 破冰活动:自我介绍任务2: 实践项目:构建个人项目 二、实验过程 2.1 破冰行动 每位参与者提交一份自我介绍。 提交地址:GitHub - InternLM/Tutorial: LLM Tutorial 的 camp3 分支~ 要求: 命名…

鸿蒙开发工程师面试-架构篇

1. 假如让你负责鸿蒙App架构设计,你会关注哪些方面? 分层架构设计: 将应用划分为产品定制层、基础特性层和公共能力层,以降低层间依赖性,提升代码可维护性。通过分层架构设计,进一步明确每层的职责和层间交…

R-CNN、Fast R-CNN和Faster R-CNN:目标检测的进化之路

在计算机视觉的世界里,目标检测是一个重要的任务,它的目标是找到图像中的特定物体,并标注出它们的位置。这项技术广泛应用于自动驾驶、安防监控等领域。为了让计算机能够准确高效地完成这一任务,科学家们提出了许多优秀的算法,其中最具代表性的就是R-CNN、Fast R-CNN和Fas…

Linux驱动开发-04LED灯驱动实验(直接操作寄存器)

一、Linux 下LED 灯驱动原理 Linux 下的任何外设驱动,最终都是要配置相应的硬件寄存器。驱动访问底层的硬件除了使用内存映射将物理地址空间转化为虚拟地址空间,去进行读写修改,还可以通过各种子系统函数去进行操作 1.1 地址映射 MMU 全称…

视频语音转文字工具有哪些?提取视频文字就用这5个

作为一名大学毕业生,你是否也常靠几句简单的英语走遍天下,却在面对外语视频时感到手足无措? 别急,虽然在这个语言大家庭中,我们不可避免地要接触外语内容,但幸运的是,一些智能软件的出现&#…

leetcode日记(41)最大子数组和

以前大一的时候做过这题jpg&#xff0c;应该是个很经典的动态规划。 我首先的想法创建二维数组&#xff0c;横列代表起始位置纵列代表结束位置&#xff0c;依次补全数组&#xff0c;后来发现时间复杂度太高了&#xff1a; class Solution { public:int maxSubArray(vector<…

阿里云CDN- https(设计支付宝春节开奖业务)

HTTP相关概念 1. HTTP概述 http是最广泛的网络协议&#xff0c;是客户端与服务器之间的请求与应答的标准&#xff08;TCP&#xff09;&#xff0c;用于www服务器传输超文本到本地浏览器的传输协议&#xff0c;使浏览器更加高效&#xff0c;网络传输减少。 2.HTTPS概述 http…

Docker之在外执行docker内部命令(十一)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 优质视频课程:AAOS车载系统+AOSP…

CSS图像不透明度的艺术:探索透明度控制的无限可能

在网页设计中&#xff0c;图像的不透明度&#xff08;Opacity&#xff09;和透明度&#xff08;Transparency&#xff09;是两个关键的概念&#xff0c;它们不仅影响着页面的视觉效果&#xff0c;还能增强用户体验&#xff0c;创造丰富的交互效果。通过调整图像的不透明度&…

Go: IM系统技术架构梳理

概述 整个IM系统的一般架构如下 我们这张图展示了整个IM系统的一般架构可见分为四层那最上面这一层是前端&#xff0c;包括哪些东西呢&#xff1f; 它包括两部分&#xff0c;第一部分是跟用户直接交互的比如说各种IOS APP, 各种安卓 APP还有各种 web APP 在浏览器里面打开的以…

内网对抗-基石框架篇域树林域森林架构信任关系多域成员层级信息收集环境搭建

知识点&#xff1a; 1、基石框架篇-域树&域林架构-权限控制-用户和网络 2、基石框架篇-域树&域林架构-环境搭建-准备和加入 3、基石框架篇-域树&域林架构-信息收集-手工和工具1、工作组(局域网) 将不同的计算机按照功能分别列入不同的工作组。想要访问某个部门的…

MySQL篇:事务

1.四大特性 首先&#xff0c;事务的四大特性&#xff1a;ACID&#xff08;原子性&#xff0c;一致性&#xff0c;隔离性&#xff0c;持久性&#xff09; 在InnoDB引擎中&#xff0c;是怎么来保证这四个特性的呢&#xff1f; 持久性是通过 redo log &#xff08;重做日志&…

使用Nginx OpenResty与Redis实现高效IP黑白名单管理

1、引言 在当今数字化时代&#xff0c;网络安全已成为企业和个人用户关注的焦点。IP黑白名单作为一种有效的网络安全策略&#xff0c;允许我们精确控制对Web资源的访问权限。通过白名单&#xff0c;我们可以确保只有可信的IP地址能够访问敏感资源&#xff1b;而黑名单则可以阻…

嵌入式人工智能(2-树莓派4B开发板硬件环境搭建)

1.硬件开发环境&#xff08;T型板&#xff09; 树莓派4B开发板需要搭配面包板&#xff0c;T型板将40个GPIO口引出&#xff0c;再将T型板插到面包板上面。这个地方需要注意插接的方向&#xff0c;由于插树莓派引脚的排线没有防呆设计&#xff0c;因此&#xff0c;请注意方向&am…

第二证券:电影暑期档持续升温 农机自动驾驶驶入快车道

农机自动驾驶打开驶入快车道 得益于农机补贴、土地流通、高标准农田制造等方针引导&#xff0c;叠加技术突围和用户降本增效的内生需求&#xff0c;我国正处于农业2.0向农业3.0的过渡阶段。其间农机自动驾驶系统是结束农业3.0&#xff08;即自动化&#xff09;的要害并迎来快速…

maptalks点聚合切换坐标系后点聚合消失

原因&#xff1a;因为坐标系投影问题 解决方法&#xff1a;切换坐标系后&#xff0c;重新把请求到的点位数据插入到的图层删除掉&#xff0c;重新插入图层就可以解决了 // 先移除已存在的同名图层 this.map.removeLayer(cluster);// 然后添加新的图层this.map.addLayer(this.c…

装饰模式:动态扩展对象的功能

在软件设计中&#xff0c;我们常常需要在不改变现有代码的基础上&#xff0c;给对象添加新的功能或责任。装饰模式&#xff08;Decorator Pattern&#xff09;是一种常用的设计模式&#xff0c;它允许我们在运行时动态地给对象添加新的行为&#xff0c;而无需修改原有的类结构。…

Linux/C++:Json--网络编程中的奇妙小工具

目录 一、什么是Json 二、Josn基本结构 2.1Josn对象 2.2C使用Josn 2.3.1解析Josn格式的数据 2.4Linux编程(vscode)使用Josn 一、什么是Json JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式&#xff0c;它是基于JavaScript语言的子集&#xff0c;但是独立于…

PyCharm软件初始化配置

安装完pycharm后&#xff0c;需要对其进行个性化设置&#xff0c;分别设置方法如下 目录 一、修改主题二、修改默认字体和大小三、设置拖动滚轮改变字体大小四、常见快捷键 一、修改主题 1、界面右上角点击红框的内容 2、选择Theme选项 3、选择对应的主题 第一二个是白色主题…