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

本文详细解析了Web存储机制,包括cookie、Web存储(包括Storage、sessionStorage、localStorage)及其操作方法,并介绍了数据持久化技术在前端应用中的作用与实践。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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:键被更改之前的值

转载于:https://www.cnblogs.com/SLchuck/p/4510195.html

1. 用户与权限管理模块 角色管理: 学生:查看实验室信息、预约设备、提交耗材申请、参与安全考核 教师:管理课题组预约、审批学生耗材申请、查看本课题组使用记录 管理员:设备全生命周期管理、审核预约、耗材采购与分发、安全检查 用户操作: 登录认证:统一身份认证(对接学号 / 工号系统,模拟实现),支持密码重置 信息管理:学生 / 教师维护个人信息(联系方式、所属院系),管理员管理所有用户 权限控制:不同角色仅可见对应功能(如学生不可删除设备信息) 2. 实验室与设备管理模块 实验室信息管理: 基础信息:实验室编号、名称、位置、容纳人数、开放时间、负责人 功能分类:按学科(计算机实验室 / 电子实验室 / 化学实验室)标记,关联可开展实验类型 状态展示:实时显示当前使用人数、设备运行状态(正常 / 故障) 设备管理: 设备档案:名称、型号、规格、购置日期、单价、生产厂家、存放位置、责任人 全生命周期管理: 入库登记:管理员录入新设备信息,生成唯一资产编号 维护记录:记录维修、校准、保养信息(时间、内容、执行人) 报废处理:登记报废原因、时间,更新设备状态为 "已报废" 设备查询:支持按名称、型号、状态多条件检索,显示设备当前可用情况 3. 预约与使用模块 预约管理: 预约规则:学生可预约未来 7 天内的设备 / 实验室,单次最长 4 小时(可设置) 预约流程:选择实验室→选择设备→选择时间段→提交申请(需填写实验目的) 审核机制:普通实验自动通过,高危实验(如化学实验)需教师审核 使用记录: 签到 / 签退:到达实验室后扫码签到,离开时签退,系统自动记录实际使用时长 使用登记:填写实验内容、设备运行情况(正常 / 异常),异常情况需详细描述 违规管理:迟到 15 分钟自动取消预约,多次违规限制预约权限 4. 耗材与安全管理模块 耗材管理: 耗材档案:名称、规格、数量、存放位置、
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值