sessionstorage的使用、存储、读取、删除

本文深入解析HTML5的sessionStorage,一种用于临时保存同一窗口数据的存储对象。探讨其特点、存储方式及限制,演示如何存储、读取和删除数据,特别关注JSON数据类型的处理。

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

概念: 

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

 特点:

  1. 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器,只会在本地生效,并在关闭标签页后清除数据。
  2. 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型
  3. 存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下。

seesionStorage只能存储字符串的数据,对于JS中常用的数组或对象却不能直接存储,我们可以通过JSON.stringify()将json数据类型转化成字符串,再存储到storage中就可以了,获取数据时再使用JSON.parse()将读取的字符串转换成对象即可。(数组本质上也是对象类型

 存储数据:

使用setItem或者属性形式

sessionStorage.setItem('a','111');
sessionStorage['a'] ='111';

读取数据:

使用getItem或者属性形式

sessionStorage.getItem("a")
sessionStorage["a"]

删除数据:

 使用removeItem移除指定的数据 

sessionStorage.removeItem("a");

删除所有数据

sessionStorage.clear()

进行删除操作之后,再读取数据就会发现该删的已经删了。 

没有数据的话,读数据会返回null。

这是一个小demo:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浏览器存储数据</title>
</head>
<body>
	
</body>
<script type="text/javascript" src="tools/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
	var data={
		a:"111",
		b:"2222"
	}
	var data1=[{name:"zsh",age:"12"},
	{name:"zzz",age:"23"},
	{name:"wer",age:"67"}];
	// 存储值:将对象转换为Json字符串
	sessionStorage.setItem("user", JSON.stringify(data));
	sessionStorage.setItem("user1", JSON.stringify(data1));
	// 取值时:把获取到的Json字符串转换回对象
	var getdata = JSON.parse(sessionStorage.getItem("user"));
	var getdata1 = JSON.parse(sessionStorage.getItem("user1"));
	console.log(getdata);     //{a: "111", b: "2222"}
	console.log(getdata1);    //返回数组
	sessionStorage.clear();
	var getdata2 = JSON.parse(sessionStorage.getItem("user1"));
	console.log(getdata2);    //null
</script>
</html>

运行结果:

### 如何在HTML中使用`sessionStorage` #### 存储数据 通过JavaScript可以非常方便地向`sessionStorage`存入键值对。下面是一个简单的例子,展示如何设置一个名为`username`的项并赋给它字符串值: ```javascript // 设置 sessionStorage 数据 sessionStorage.setItem('username', 'JohnDoe'); ``` 此操作会在当前会话期间保存这个用户名直到浏览器或标签被完全关闭[^3]。 #### 获取存储的数据 一旦设置了某个项目到`sessionStorage`里边去之后,在同一会话中的任何地方都可以读取这项信息: ```javascript // 获取 sessionStorage 数据 let username = sessionStorage.getItem('username'); console.log(username); // 输出 "JohnDoe" ``` 这段代码尝试获取之前设定好的`username`变量,并将其打印出来[^2]。 #### 删除特定条目 如果想要移除某一项已存在的记录,则可以通过调用`removeItem()`方法来实现这一点: ```javascript // 移除指定的 sessionStorage 条目 sessionStorage.removeItem('username'); ``` 这将会从`sessionStorage`对象里面彻底清除掉名称为`username`的那个属性及其对应的值[^1]。 #### 清空所有数据 有时候可能需要一次性清理所有的临时数据,这时就可以利用`clear()`函数完成整个`sessionStorage`内容的一次性擦除工作: ```javascript // 清理全部 sessionStorage 记录 sessionStorage.clear(); ``` 以上就是关于怎样运用HTML里的`sessionStorage`来进行基本的操作介绍[^4]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值