01_CookieWebStorage

news2024/12/22 18:54:24

1 Cookie

Cookie的使用必须基于web服务器，因为Cookie的操作会跟随http请求进行。
Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。
Cookie 并不是它的原意“甜饼”的意思，而是一个保存在客户机中的简单的文本文件，这个文件与特定的 Web 文档关联在一起，保存了该客户机访问这个Web 文档时的信息，当客户机再次访问这个 Web 文档时这些信息可供该文档使用。由于“Cookie”具有可以保存在客户机上的神奇特性，因此它可以帮助我们实现记录用户个人信息的功能，而这一切都不必使用复杂的CGI等程序 。
举例来说，一个 Web 站点可能会为每一个访问者产生一个唯一的ID，然后以 Cookie 文件的形式保存在每个用户的机器上。如果使用浏览器访问 Web，会看到所有保存在硬盘上的 Cookie。在这个文件夹里每一个文件都是一个由“名/值”对组成的文本文件，另外还有一个文件保存有所有对应的 Web 站点的信息。在这里的每个 Cookie 文件都是一个简单而又普通的文本文件。透过文件名，就可以看到是哪个 Web 站点在机器上放置了Cookie(当然站点信息在文件里也有保存) 。
Cookie是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。

1.1 Cookie的作用

对于前端来讲，Cookie可以存储一些临时数据，在页面之间共享，并且可以在页面关闭后，再开打开，还可以继续获取。
yuque_diagram.jpg

1.2 Cookie的格式

我们在语雀的网站控制台中，打印一下document.cookie可以获取一个有规律的字符串。
在浏览器中，如果想要查看当前域名下的Cookie，也可以在开发者工具中，选择应用程序，查看。
我们在控制台打印的document.cookie其实本质上，就是对应的应用程序的Cookie
image.png

1.3 Cookie的使用

查看Cookie

我们可以使用document.cookie进行查看。因为这个操作可以获取到所有的Cookie，不能获取到单独的某个Cookie，所以我们就需要封装一个函数。

新增Cookie

最简单的新增Cookie的方式，我们可以使用

document.cookie="key=value"

执行上面的代码后，我们可以在document.cookie中看到原本的字符串里，多了一个key=value

注：Cookie需要借助Web服务器，以文件形式打开的页面，无法使用Cookie。
使用web服务器之后，就可以正常看到我们设置的Cookie。
设置好Cookie后，通过document.cookie可以查看对应的Cookie

1.4 区分首次访问

Cookie的过期时间

002.png

  • 默认情况，cookie是有过期时间的，cookie的过期时间在不设置的时候，我们会得到一个会话Cookie（Session Cookie），表示当浏览器关闭时，cookie就会失效。
  • 我们也可以在设置cookie的时候，设置过期时间。
document.cookie="key=value;expires=标准的时间格式"

标准的时间格式，是通过new Date().toUTCString()

// 设置10天后过期
new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toUTCString()

1.5 js-cookie的使用

我们可以自己封装cookie相关的操作，但是这种操作不是很方便，我们可以利用第三方插件来解决这些问题。

新增Cookie
Cookies.set(key, value)

Cookies.set(key, value, {
	expires: 7 // 7天后过期 也可以写过期时间的日期对象
})
获取Cookie
Cookies.get(key) // 获取到单个的cookie
Cookies.get() // 获取到所有的cookie
删除Cookie
Cookies.remove(key)
修改Cookie
Cookies.set(已存在的key, 新的值)

2 Web Storage

为什么学习Web Storage ？
在HTML5之前，我们通常使用Cookie进行数据存储，例如在本地设备上存储历史活动的信息，但这种方式的缺点是存储的空间大小只有4KB左右，存储的数据解析起来比较复杂。
为此，HTML5提出了网络存储的相关解决方案，即Web Storage（Web存储）。

2.1 Web Storage的作用

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

Web Storage和Cookie的区别
  • 类似于Cookie，但相比Cookie可以减少网络流量，因为Web Storage存储的数据不会发送给服务器，而Cookie存储的数据会由浏览器通过HTTP请求自动发送给服务器。
  • 将数据存储在Web Storage可以减少数据在浏览器和服务器间不必要地来回传递。

Web Storage中包含两个关键的对象，都是Web Storage的实例，都能使用Web Storage接口提供的方法和属性。

  • localStorage对象：用于本地存储。
  • sessionStorage对象：用于区域存储。
Web Storage具有以下5个特点
  • 数据的设置和读取比较方便。
  • 容量较大，可以存储大约5MB数据。
  • 只能存储字符串，如果要存储JSON对象，则可以使用JSON.stringify()和JSON.parse()方法分别进行序列化和反序列化。
  • 本地数据可以即时获得。借助浏览器的缓存，整个页面和数据都可以保存在本地，从本地读数据比通过网络从服务器获得数据快得多，可以立即显示网页中的缓存的内容。
  • 数据可以临时存储。很多时候数据只需要在用户浏览单个页面期间使用，关闭页面后数据就可以丢弃，这种情况使用sessionStorage非常方便。

2.2 localStorage

localStorage的主要作用

本地存储，它可以将数据按照键值对的方式保存在浏览器中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化保存。

localStorage与sessionStorage的区别
  • 存储数据的生命周期不同。locaStorage是永久性存储，而sessionStorage的生命周期与会话保持一致，会话结束时数据消失。
  • 从硬件方面理解，localStorage的数据是存储在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取localStorage保存的数据。而sessionStorage的数据保存在内存中，当浏览器关闭后，内存将被自动清除。
localStorage的优势

拓展了Cookie的4KB限制，并且可以将第一次请求的数据直接存储到本地，其容量相当于一个5MB大小的数据库。

localStorage也有一些局限
  • IE浏览器在8以上版本才支持localStorage。
  • 不同浏览器保存的数据量大小不统一。
  • 目前所有的浏览器都会把localStorage的值类型限定为String类型，对于比较常用的JavaScript对象类型需要转换成字符串保存。
  • localStorage在浏览器的隐私模式下是不可读取的。
  • localStorage不能被网络爬虫抓取到。
localStorage对象提供的方法和属性
方法/属性描述
key(n)该方法用于返回localStorage对象中第n个key的名称
setItem(key,value)该方法接收键名和值作为参数，将会把键值对存储到localStorage中，如果键名存在，则更新其对应的值
getItem(key)该方法接收一个键名作为参数，返回键名对应的值
removeItem(key)该方法删除键名为key的存储内容
clear()该方法清空所有存储内容
length该属性返回localStorage对象中包含的item的数量
使用localStorage对象的方法来设置、获取和删除数据
<input type="text" id="username">
<button id="setData">设置数据</button>
<button id="getData">获取数据</button>
<button id="delData">删除数据</button>
<script>
	var username = document.querySelector('#username');
	// 单击“设置数据”按钮，设置数据
	document.querySelector('#setData').onclick = function () {
		var val = username.value;    // 获取username里面的值
		localStorage.setItem('username', val);
	};
	// 单击“获取数据”按钮，获得数据
	document.querySelector('#getData').onclick = function () {
		alert(localStorage.getItem('username'));
	};
	// 单击“删除数据”按钮，删除数据
	document.querySelector('#delData').onclick = function () {
		localStorage.removeItem('username');
	};
</script>

2.3 sessionStorage

sessionStorage的特点
  • 存储的数据只在当前网页所在的浏览器标签页内有效，只要这个浏览器标签页没有关闭，即使刷新页面或进入同源的另一页面，数据仍然存在。
  • 当浏览器标签页关闭后，sessionStorage中存储的数据将被自动清除。
  • 如果打开了不同的标签页，即使是同一页面，sessionStorage对象也是不同的。所以如果想要让不同标签页下的网页不能互相访问数据，可以将数据保存在sessionStorage中。
sessionStorage对象也提供了一些方法和属性

与localStorage对象的方法和属性类似。

使用sessionStorage对象的方法设置数据
<input type="text" id="username">
<button id="setData">设置数据</button>
<script>
	var username = document.querySelector('#username');
	// 单击“设置数据”按钮，设置数据
	document.querySelector('#setData').onclick = function () {
		var val = username.value;           // 获取username里面的值
		sessionStorage.setItem('username', val);
	};
</script>

2.4 Web Storage事件监听

storage事件触发的条件

当使用Web Storage存储的数据发生变化时，会触发window对象的storage事件。我们可以监听该事件并指定事件处理函数，当其他页面中的localStorage或sessionStorage中保存的数据发生改变时，就会执行事件处理函数。

// window.addEventListener(事件名, 事件处理函数);
window.addEventListener('storage', function (event) {
	console.log(event.key);
});

事件处理函数接收一个event对象作为参数，event对象的key属性保存发生变化的数据的键名。

event对象的属性
属性描述
event.key获取在sessionStorage或localStorage中被修改的数据键值
event.oldValue获取在sessionStorage或localStorage中被修改前的值
event.newValue获取在sessionStorage或localStorage中被修改后的值
event.url获取在sessionStorage或localStorage中值的页面URL地址
event.storageArea获取变动的sessionStorage对象或localStorage对象

storage事件并不在导致数据变化的当前页面触发。
如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变sessionStorage或localStorage的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发storage事件。通过这种机制，可以实现多个页面之间的通信。
由于sessionStorage无法在不同标签页的网页中互相访问数据，当使用storage事件时，可以将页面放在<iframe>标签创建的框架中，此时在框架内通过storage事件可以监听外层页面的sessionStorage的数据变化。

使用storage事件对页面中的数据进行监听
<!--index01.html-->
<label>用户名：</label> <input type="text" id="username">
<button id="save">保存</button>
<script>
	var username = document.querySelector('#username');
	// 单击“保存”按钮，设置数据
	document.querySelector('#save').onclick = function () {
		var val = username.value;    // 获取username里面的值
		localStorage.setItem('username', val);
	};
</script>

<!--index02.html-->
<span>新的用户名:</span>
<span id="newval"></span>
<br>
<span>旧的用户名:</span>
<span id="oldval"></span>
<script>
	var newdata = document.getElementById('newval');
	var olddata = document.getElementById('oldval');
	window.addEventListener('storage', function (e) {
		newdata.innerHTML = e.newValue;     // 设置元素的内容为修改后的值
		olddata.innerHTML = e.oldValue;        // 设置元素的内容为修改前的值
	});
</script>

3 Cookie 和 WebStorage 的区别

  • Cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递；前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。
  • 存储大小：Cookie 数据大小不能超过4 k 。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 Cookie 大得多，可以达到 5M 或更大。
  • 有效时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。Cookie 设置的 Cookie 过期时间之前一直有效，即使窗口或浏览器关闭。
  • 作用域：sessionStorage 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。localStorage 在所有同源窗口中都是共享的。Cookie 在所有同源窗口中都是共享的。

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

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

相关文章

水生物数据集

水生物数据集

FishNet: A Large-scale Dataset and Benchmark for Fish Recognition, Detection, and Functional Traits Prediction FishNet 是一个大规模多样化的数据集&#xff0c;包含了来自 17357 种水生物的 94532 张精心整理的图像。这些图像根据水生物的生物分类学&#xff08;目、科…
阅读更多...
数据挖掘之贝叶斯优化——前反馈特征的参数，估计特征的最佳数值

数据挖掘之贝叶斯优化——前反馈特征的参数，估计特征的最佳数值

贝叶斯优化是一个全局优化方法&#xff0c;用于优化具有噪声的黑盒函数。这一方法在许多现实世界的问题中都有应用&#xff0c;特别是在那些评估目标函数的代价很高的场合&#xff0c;例如超参数调优。 背景&#xff1a; 为什么需要贝叶斯优化&#xff1f; 在数据挖掘、机器…
阅读更多...
VBA窗体跟随活动单元格【简易版】

VBA窗体跟随活动单元格【简易版】

本篇博客与以往的风格不同&#xff0c;先上图再讲解。 这个效果是不是很酷&#xff0c;VBA窗体&#xff08;即UserForm&#xff0c;下文中简称为窗体&#xff09;可以实现很多功能&#xff0c;例如&#xff1a;用户输入数据&#xff0c;提供选项等等。如本博客标题标注&#…
阅读更多...
分享一下微信小程序怎么实现积分商城功能

分享一下微信小程序怎么实现积分商城功能

微信小程序是一种便捷、高效的应用程序&#xff0c;它可以帮助企业或商家快速搭建自己的线上平台&#xff0c;提供更好的服务和产品给用户。积分商城是小程序中一种常见的功能&#xff0c;它可以帮助企业或商家吸引和留住用户&#xff0c;提高用户的忠诚度和互动性。下面就以微…
阅读更多...
苹果 Vision Pro 头显新专利：增加重量减轻颈部压力

苹果 Vision Pro 头显新专利：增加重量减轻颈部压力

上周&#xff0c;彭博社的古尔曼表示 Vision Pro 头显过重&#xff0c;导致开发者佩戴后出现明显的颈部疲劳。随后&#xff0c;便有人发现在美国商标和专利局&#xff08;USPTO&#xff09;公示的清单中&#xff0c;苹果公司又获得了一项Vision Pro的专利&#xff0c;该专利提…
阅读更多...
【Linux学习笔记】下载工具yum

【Linux学习笔记】下载工具yum

1. yum工具1.1. yum的安装1.2. yum的搜索1.3. yum的卸载 2. Linux和Windows互相传输文件2.1. rz命令2.2. sz命令 3. yum的下载源 1. yum工具 yum是Linux软件包的管理器&#xff0c;是一个软件。那么软件的本质是什么呢&#xff1f; 答案是指令&#xff01; 下面举几个简单的例…
阅读更多...
如何管理消极怠工的员工？

如何管理消极怠工的员工？

消极怠工是指员工在工作中表现出缺乏积极性和主动性&#xff0c;对工作任务不负责任或者敷衍了事的行为。这种行为不仅影响了员工个人的工作效率和职业发展&#xff0c;也会对整个团队的工作氛围和效率产生负面影响。因此&#xff0c;如何管理消极怠工的员工成为了管理者需要面…
阅读更多...
OA系统和ERP系统有什么区别？

OA系统和ERP系统有什么区别？

在当今的企业管理领域&#xff0c;协同办公管理系统和ERP系统是两个非常重要的工具。它们在企业的日常运营中扮演着不同的角色&#xff0c;有着各自独特的功能和优势。那么&#xff0c;OA系统和ERP系统到底有什么区别呢&#xff1f;协同办公管理系统又是如何在这两者之间发挥协…
阅读更多...
【Python应用】S02 将元组、序列分解为单独的变量

【Python应用】S02 将元组、序列分解为单独的变量

分解已知元素数量的元组、序列 e . g . 1 e.g.1 e.g.1 分解包含 N N N 个元素的元组或序列为 N N N 个单独的变量。 p (4, 5) x, y pe . g . 2 e.g.2 e.g.2 data [ACME, 50, 91.1, (2012, 12, 21)] name, shares, price, date datae . g . 3 e.g.3 e.g.3 data [ACME,…
阅读更多...
重生奇迹mu游戏有哪些职业？

重生奇迹mu游戏有哪些职业？

作为一款经典的网络游戏&#xff0c;重生奇迹MU一直是佼佼者&#xff0c;各方面设计非常出色&#xff0c;在玩家们的评价中也是不错&#xff0c;让玩家非常喜欢这款游戏了。 在这款游戏中有许多职业&#xff0c;必须要注意每个职业都有存在的价值&#xff0c;每个职业都有自己…
阅读更多...
linux安装切换图形化界面？

linux安装切换图形化界面？

1.描述 一台测试的服务器&#xff0c;安装的时候用的最小化安装&#xff0c;没有安装 ”带GUI的服务器”的环境 使用的时候想安装上&#xff1a;因为使用vncserver的时候&#xff0c;连接不显示图形界面 2.安装图形化界面 yum groupinstall "Server with GUI" --或者…
阅读更多...
微信小程序--小程序框架

微信小程序--小程序框架

目录 前言&#xff1a; 一.框架基本介绍 1.整体结构&#xff1a; 2.页面结构&#xff1a; 3.生命周期&#xff1a; 4.事件系统&#xff1a; 5.数据绑定&#xff1a; 6.组件系统&#xff1a; 7.API&#xff1a; 8.路由&#xff1a; 9.模块化&#xff1a; 10.全局配置&…
阅读更多...
计算机视觉-数学基础

计算机视觉-数学基础

学习代数、微积分或其他数字概念来加深对计算机视觉或图像处理的理解本身就是一种令人衰弱的考验&#xff0c;除非建立图像与其数字表示之间的清晰关系。我们中的许多人都熟悉数学在计算机视觉领域中发挥的重要作用&#xff0c;而那些不熟悉的人&#xff0c;会通过这篇文章以及…
阅读更多...
如果你想转行做网络安全，请关注三大问题

如果你想转行做网络安全，请关注三大问题

随着互联网的普及和数字化的发展&#xff0c;网络安全的重要性日益凸显&#xff0c;对网络安全专业人才的需求也在不断增长。给大家一些转行做网络安全的一些考虑和建议&#xff1a; 1&#xff1a;网络安全对技术水平要求比较高&#xff0c;摸鱼不现实 网络安全是一个广泛而复…
阅读更多...
华为eNSP配置专题-VLAN和DHCP的配置

华为eNSP配置专题-VLAN和DHCP的配置

文章目录 华为eNSP配置专题-VLAN和DHCP的配置1、前置环境1.1、宿主机1.2、eNSP模拟器 2、基本环境搭建2.1、基本终端构成和连接 3、VLAN的配置3.1、两台PC先配置静态IP3.2、交换机上配置VLAN 4、接口方式的DHCP的配置4.1、在交换机上开启DHCP4.2、在PC上开启DHCP 5、全局方式的…
阅读更多...
风火轮X86主板youyeetoo X1：部署MQTT Broker

风火轮X86主板youyeetoo X1：部署MQTT Broker

号外&#xff0c;号外。。。深圳风火轮科技又推出新品啦–youyeetoo X1。 youyeetoo X1 是一款由深圳风火轮科技推出的x86架构单板电脑(SBC)&#xff0c;可运行全功能版的windows和Linux, 具备低成本&#xff0c;高性能的特点&#xff08;11代Intel CPU N5105&#xff09;&…
阅读更多...
构建 Active Directory 域的最佳实践

构建 Active Directory 域的最佳实践

Active Directory是IT基础架构的核心&#xff0c;也是构建声音的主要步骤&#xff0c;网络安全态势并保持合规&#xff0c;要创建正确的基础架构&#xff0c;必须遵循一些基本步骤以避免配置和安全性问题。 应用于新域或在重组现有域时应用的一些步骤 坚持基本原则创建适当的…
阅读更多...
三、机器学习基础知识：Python常用机器学习库（Numpy第二部分）

三、机器学习基础知识：Python常用机器学习库（Numpy第二部分）

文章目录 5、其他创建数组的方式5.1 空数组5.2 全零数组5.3 全一数组5.4 数列5.5 随机数组5.6 数组转换 6、索引、切片和迭代7、Numpy计算7.1 基本数组运算7.2 条件运算7.3 统计运算 8、Numpy存取文件 前序内容&#xff1a; 三、机器学习基础知识&#xff1a;Python常用机器学习…
阅读更多...
【深度学习】【Opencv】【GPU】python/C++调用onnx模型【基础】

【深度学习】【Opencv】【GPU】python/C++调用onnx模型【基础】

【深度学习】【Opencv】【GPU】python/C调用onnx模型【基础】 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【深度学习】【Opencv】【GPU】python/C调用onnx模型【基础】前言Python版本OpenCVWindows平台安装OpenCVopencv调用onnx模型 C版本…
阅读更多...
视频怎么压缩？视频太大这样处理变小

视频怎么压缩？视频太大这样处理变小

在当今时代&#xff0c;视频已经成为了我们日常生活中不可或缺的一部分&#xff0c;然而&#xff0c;视频文件往往非常大&#xff0c;给我们的存储和传输带来了很大的不便&#xff0c;那么&#xff0c;如何有效地压缩视频呢&#xff1f; 一、使用压缩软件 首先我们给大家分享一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023