HTML sessionStorage会话存储

article/2025/9/18 3:47:48

 sessionStorage会话存储

   sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。本篇主要介绍 sessionStorage(会话存储)的使用方式。包括添加、修改、删除等操作。

目录

1. 介绍

  1.1 说明

  1.2 特点

  1.3 浏览器最小版本支持

  1.4 适合场景

2. 成员

  2.1 属性

  2.2 方法

3. 示例

  3.1 存储数据

  3.2 读取数据

  3.3 存储Json对象

 

1. 介绍 

1.1 说明

sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。

 

1.2 特点

1) 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作,这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名,忽略协议(HTTP和HTTPS)和端口号的要求)

2) 单标签页限制。sessionStorage操作限制在单个标签页中,在此标签页进行同源页面访问都可以共享sessionStorage数据。

3) 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器,只会在本地生效,并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能,seesionStorage的数据也会恢复)。

4) 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串,也会在存储时转换为字符串。true值会转换为"true")。

5) 存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下

可访问 http://dev-test.nemikor.com/web-storage/support-test/ 测试浏览器的存储上限。

 

1.3 浏览器最小版本支持

支持sessionStorage的浏览器最小版本:IE8、Chrome 5。

 

1.4 适合场景 

sessionStorage 非常适合SPA(单页应用程序),可以方便在各业务模块进行传值。

 

2. 成员

2.1 属性

属性 readonly int sessionStorage.length :返回一个整数,表示存储在 sessionStorage 对象中的数据项(键值对)数量。

 

2.2 方法

方法 string sessionStorage.key(int index) :返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。

方法 string sessionStorage.getItem(string key) :返回键名(key)对应的值(value)。若没有返回null。

方法 void sessionStorage.setItem(string key, string value) :该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。

方法 void sessionStorage.removeItem(string key) :将指定的键名(key)从 sessionStorage 对象中移除。

方法 void sessionStorage.clear() :清除 sessionStorage 对象所有的项。

 

3. 示例

3.1 存储数据

3.1.1 采用setItem()方法存储

1

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

3.1.2 通过属性方式存储  

1

sessionStorage['testKey'] = '这是一个测试的value值';

  

3.2 读取数据

3.2.1 通过getItem()方法取值

1

sessionStorage.getItem('testKey'); // => 返回testKey对应的值

3.2.2 通过属性方式取值

1

sessionStorage['testKey']; // => 这是一个测试的value值

 

3.3 存储Json对象

sessionStorage也可存储Json对象:存储时,通过JSON.stringify()将对象转换为文本格式;读取时,通过JSON.parse()将文本转换回对象。

1

2

3

4

5

6

7

8

9

10

11

12

var userEntity = {

    name: 'tom',

    age: 22

};

 

// 存储值:将对象转换为Json字符串

sessionStorage.setItem('user', JSON.stringify(userEntity));

 

// 取值时:把获取到的Json字符串转换回对象

var userJsonStr = sessionStorage.getItem('user');

userEntity = JSON.parse(userJsonStr);

console.log(userEntity.name); // => tom


http://chatgpt.dhexx.cn/article/dOQS9biY.shtml

相关文章

【windows】会话(Session)、窗口站(WindowsStation)、桌面、窗口

序 一个系统可以同时登录多个用户(包括远程用户登录)(多用户系统)。 一个用户拥有一个会话(远程用户被称为远程会话)。 一个会话拥有多个工作站和窗口。只能拥有一个交互式工作站(Winsta0)。(Window Station 0…

WindTerm导出会话

WindTerm的session配置并无法被适用于其他软件中,所有的session保存在WindTerm安装路径下的profiles文件夹内,如果需要更新版本或回退,将所安装的版本覆盖即可,或是将profiles复制于新路径下。 图标闪烁设置、会话保存-导入导出 …

Spring Security中的会话【Session】管理与防御以及会话的并发控制

众所周知,HTTP本身是没有任何关于当前用户状态的内容,也就是两个HTTP请求之间是没有任何的关联可言,用户在和服务器交互的过程中,站点无法确定是哪个用户访问,也因此不能对其提供相应的个性化服务。Session的诞生就是为…

web基础:会话

一、会话概述 HttpSession对象可以保存跨同一个客户多个请求的会话状态。即与一个特定客户的整个会话期间,HttpSession会持久存储。对于会话期间客户做的所有请求,从中得到的所有信息,都可以使用HttpSession对象保存。 会话的工作方式&#…

会话固定攻击(session fixation attack)及解决办法

1 Cookie 的工作过程 Cookie的传递用到了两个字段: 请求头字段Cookie和响应头字段Set-Cookie。 当用户浏览器第一次访问服务器的时候,服务器肯定是不知道他的身份的。所以,就要创建一个独特的身份识别数据,格式是"keyvalue"&…

2022年会话推荐综述

title: 2022年会话推荐综述 最近对于会话推荐有了新的兴趣 文章题目: A Survey on Session-based Recommender Systems 0. 前言 提供了一个统一的框架来对SBRSs研究进行分类 SBRS的统一问题陈述,其中SBRS建立在正式概念之上:用户、项目、…

会话保持原理

1. 什么是会话保持? 会话保持是负载均衡最常见的问题之一,也是一个相对比较复杂的问题。会话保持有时候又叫做粘滞会话(Sticky Sessions)。会话保持是指在负载均衡器上的一种机制,可以识别客户端与服务器之间交互过程的关连性,在…

linux会话session

linux会话 什么是linux session 我们常见的 Linux session 一般是指 shell session。Shell session 是终端中当前的状态,在终端中只能有一个 session。 当我们打开一个新的终端时,总会创建一个新的 shell session。这表明会话是我们和shell交互的一个过…

会话令牌写入URL

目录 一. 漏洞描述 二. 漏洞修复 一. 漏洞描述 会话令牌即Token,关于Token,传送门-》如何理解Session、Cookie与Token 。 用户在进行get请求将用户的令牌写入url,导致中间人攻击获取令牌进行登陆。如下 二. 漏洞修复 禁止将令牌写入url

PDU会话流程

1.PDU会话的概念 1.1概述 5G系统的一个关键功能:为UE提供一个到达DN的连接会话管理功能(SMF)职责: 设置UE到DN的连接对该连接的用户面进行管理 5G系统的设计目标是支持大量的5G案例: 支持不同的PDU类型多个可选的…

会话固定漏洞

目录 漏洞原理 漏洞检测 漏洞利用 漏洞修复 漏洞原理 Session 是应用系统对浏览器客户端身份认证的属性标识,在用户退出应用系统时,应将客户端 Session 认证属性标识清空。如果未能清空客户端 Session 标识,在下次登录系统时&#xff0c…

《Oracle Java EE编程自学和面试指南》09-02:HttpSession接口

深入了解IT/互联网行业及岗位,请参阅通用IT/互联网岗位招聘计划(最新全岗版)。 深入了解职业晋升及学习路线,请参阅最优职业晋升路线和课程学习指南(最新全栈版)。 内容导航: 前言1、HttpSessi…

【LWIP的mDNS】

一.mdns 1.什么是mdns? mDNS协议适用于局域网内没有DNS服务器时的域名解析,设备通过组播的方式交互DNS记录来完成域名解析,约定的组播地址是:224.0.0.251,端口号是5353 主要用于在同一局域网内,…

DNS DDNS NBNS mDNS LLMNR LLDPDU SSDP协议

DNS DNS只是提供了域名和IP地址之间的静态对应关系,当IP地址发生变化时,DNS无法动态的更新域名和IP地址之间的对应关系,从而导致访问失败。但是DDNS系统是将用户的动态IP地址映射到一个固定的域名解析服务上 DDNS DDNS用来动态更新DNS服务…

mDNSResponder介绍与移植

mDNSResponder是苹果的Bonjour项目的一部分。 Bonjour是法语“你好”的意思。 Bonjour软件源自正IETF零配置网络工作。零配置工作有三个要求: 1.分配IP地址(即使没有分配DHCP服务器的IP地址) 2.提供名称到地址的转换(即使没有DNS服…

启用Ubuntu 服务器上的 mDNS

陈拓 2022/03/18-2022/03/18 在动态分配IP地址的情况下,在局域网中使用mDNS访问Ubuntu服务器就不需要知道IP地址了。 我的Ubuntu系统版本 先用IP地址登录Ubuntu服务器。 具体操作见《Win10命令窗口的SSH和SFTP操作》 Win10命令窗口的SSH和SFTP操作_晨之清风的博…

Bonjour手把手搭建一:mDNS(apple multicastdns.org)

mDNS(Multicast DNS)——From Apple https://support.apple.com/kb/TA20999?localezh_CN&viewlocaleen_US Multicast DNS, one of the features incorporated in Bonjour, which was introduced in Mac OS X 10.2. Bonjour的一个新特性,在Mac OS X10.2后引入…

SpyCast:一款功能强大的跨平台mDNS枚举工具

关于SpyCast SpyCast是一款功能强大的跨平台mDNS枚举工具,该工具支持在主动模式下下递归查询服务,也可以在被动模式下仅侦听多播数据包。因此,广大研究人员可以使用该工具测试mDNS协议和本地网络的安全性。 mDNS介绍 mDNS,即多…

esp-idf编译报错Failed to resolve component ‘mdns‘

Failed to resolve component mdns 根据提示 打开https://components.espressif.com/搜索mdns 选择复制 执行后再次进行编译

OpenWrt 安装 mDNS,并设置 mDNS 映射

OpenWrt 安装 mDNS,并设置 mDNS 映射 路由器:OpenWrt 21.02.1电脑:Windows 10 21H1 Windows 10 现在已经默认支持了 mdns,可以直接 ping 设备名称.local 查看电脑的ip。 1.下载 mDNS 安装包 opkg update opkg install umdns…