23. javacript高级程序设计-数据存储

1. 数据存储

1.1 cookie

HTTP Cookie, cookie,最初用来在客户端存储回话信息。

(1). 限制,不同浏览器对特定域名下的cookie 的个数有限制,每个域名下最好不要操过20个cookie

(2). cookie的构成

  1. 名称:一个唯一确定cookie的名称,不区分大小写,cookiede 名称必须经过URL编码
  2. 值:存储在cookie中的字符串值,值必须被URL编码
  3. 域:cookie对那个域是有效的,所有向该域发送的请求都会包含该cookie,可以包含子域,没有明确设定,那么这个域会被认作来自设置cookie的那个域
  4. 路径:对于指定域的那个路径,应该向服务器发送cookie
  5. 失效时间:表示cookie何时应该被删除的时间戳。默认情况下,浏览器结束会话时会删除cookie,如果设置以前的时间,cookie会立即被删除
  6. 安全标志:制定后,cookie只有在使用SSL连接的时候才发送到服务器。

(3). 获取或设置cookie

获取cookie属性时,使用document.cookie返回当前页面(根据域,路径,失效时间和安全设置)可用的所有cookie字符串:

name1=value1;name2=value2

所有的名称和值都是URL编码的,所以必须解码才能使用

设置cookie属性时,采用

document.cookie=” name1=value1;name2=value2;domain=.wrox.com;path=/”

方式,名称和值最好采用URL进行编码

1.2 Web存储机制

1.2.1 Storage

Storage类型根据键值对来存储数据,有如下方法:

(1). clear():删除所有值

(2). getItem(name):根据指定名称name获取对应的值

(3). key(index):根据index获取指定位置处的值

(4). removeItem(name):删除指定名称的键值对

(5). setItem(name,value):为指定的名称设置一个对应的值

1.2.2 sessionStorage

sessionStorage对象存储特定于某个回话的数据,也就是说浏览器关闭的时候该数据就会丢失。可以使用Storage相关方法对数据进行操作

1.2.3 globalStorage

globalStorage跨越回话保存数据,存在特定的访问限制,要使用globalStorage,首先要指定哪些域可以访问该数据,可以通过方括号使用属性来实现。

globalStorage[“wrox.com”]

globalStorage的每个属性对象都是一个Storage实例,可以使用Storage相关方法对数据进行操作

1.2.4 localStorage

localStorage对象在修订过的HTML5规范中作为持久保存客户端数据的方案取代了globalStorage,与globalStorage不同,不能指定任何访问规则,要访问一个localStorage对象,页面必须来自于同一个域名(子域名无效),使用同一种协议,在同一个端口上。相当于globalStorage[location.host]

localStorage是Storage的实例,可以使用Storage相关方法对数据进行操作。

1.2.5 storage事件

对Storage对象的任何修改,都会触发在文档上的storage事件,这个事件的event对象有如下属性:

(1). domain:发生变化的存储空间域名

(2). key:设置或者删除的键名

(3). newValue:如果是设置值,则是新值;如果是删除值,则是null

oldValue:键被更改之前的值

posted @   S&L·chuck  阅读(198)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示