会话存储sessionStorage
2024-10-08 22:10:55
会话存储的工作方式和本地存储的工作方式很接近,不同之处在于数据是各个浏览器上下文私有的,会在文档被关闭时移除(注意是被关闭时才移除,刷新是不会移除的)。我们通过全局sessionStorage访问会话存储,它返回一个Storage对象,该对象与本地存储里的是一样的。
sessionStorage案例1:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sessionStorage</title>
<style> </style>
</head> <body>
<ul>
<li>key:<input id="key" type="text" value=""></li>
<li>value:<input id="value" type="text" value=""></li>
<li>
<input id="add" type="button" value="add">
<input id="clear" type="button" value="clear">
</li>
<li id="countmsg">There are <span id="count"></span> items</li>
</ul>
<table id="data"></table>
<script>
displayData();
document.getElementById('add').onclick=handleButtonPress;
document.getElementById('clear').onclick=handleButtonPress;
function handleButtonPress(e){
switch(e.target.id){
case 'add':
var key=document.getElementById('key').value;
var value=document.getElementById('value').value;
sessionStorage.setItem(key,value);
break;
case 'clear':
sessionStorage.clear();
}
displayData();
}
function displayData(){
var tableItem=document.getElementById('data');
tableItem.innerHTML='';
var itemCount=sessionStorage.length;
document.getElementById('count').innerHTML=itemCount;
for(var i=0;i<itemCount;i++){
var key=sessionStorage.key(i);
var val=sessionStorage[key];
tableItem.innerHTML+='<tr><th>'+key+'</th><td>'+val+'</td></tr>';
}
}
</script>
</body>
</html>
这个案例的工作方式和本地存储里的案例很接近,不同之处在与可见性和寿命受到限制(sessionStorage是临时存储)。这些限制会影响storage事件的处理方式,本地存储里提到storage事件只会在其他同源文档中触发。对于会话存储,这就意味着事件只会在内嵌文档中触发,比如iframe文档,如下案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sessionStorage</title>
<style> </style>
</head> <body>
<ul>
<li>key:<input id="key" type="text" value=""></li>
<li>value:<input id="value" type="text" value=""></li>
<li>
<input id="add" type="button" value="add">
<input id="clear" type="button" value="clear">
</li>
<li id="countmsg">There are <span id="count"></span> items</li>
</ul>
<table id="data"></table>
<iframe src="./storage.html" width="500" height="175"></iframe>
<script>
displayData();
document.getElementById('add').onclick=handleButtonPress;
document.getElementById('clear').onclick=handleButtonPress;
function handleButtonPress(e){
switch(e.target.id){
case 'add':
var key=document.getElementById('key').value;
var value=document.getElementById('value').value;
sessionStorage.setItem(key,value);
break;
case 'clear':
sessionStorage.clear();
}
displayData();
}
function displayData(){
var tableItem=document.getElementById('data');
tableItem.innerHTML='';
var itemCount=sessionStorage.length;
document.getElementById('count').innerHTML=itemCount;
for(var i=0;i<itemCount;i++){
var key=sessionStorage.key(i);
var val=sessionStorage[key];
tableItem.innerHTML+='<tr><th>'+key+'</th><td>'+val+'</td></tr>';
}
}
</script>
</body>
</html>
此案例中iframe引入的storage.html与本地存储那里的storage.html代码一模一样,此处就不做说明。直接copy上面的代码并在浏览器中运行可以查看到效果
最新文章
- [Linux]在linux中,常常用到ctrl和其他按键组合,常用的有哪些及意义呢
- 快速入门系列--WCF--06并发限流、可靠会话和队列服务
- STM32F10XXX 启动设置
- Java注解知识点摘抄
- .net发邮件
- iOS-网络编程(二)文件上传和断点离线下载
- 基于 JVMTI 实现 Java 线程的监控(转)
- immutability因React官方出镜之使用总结分享!
- 并发编程基础之wait以及notify的用法
- Python之路(第二十九篇) 面向对象进阶:内置方法补充、异常处理
- webapi返回泛型给easyui
- VSS迁移详细教程
- 蓝桥杯—ALGO-2 最小最大公倍数
- redis学习笔记-redis的安装
- 二、Django用Eclipse编写一个登录界面
- Spark Streaming自定义Receivers
- 开发还是应该使用linux
- Word 2010 制作文档结构之页码从正文开始设置
- 最小割 D. Behind the Wall Samara University ACM ICPC 2016-2017 Quarterfinal Qualification Contest
- 【LOJ】#2056. 「TJOI / HEOI2016」序列
热门文章
- vue-cli 项目结构介绍
- mailx发邮件报错Error initializing NSS: Unknown error -8015. . . . message not sent.处理
- 添砖加瓦:Linux系统监测
- Cisco2960 交换机密码破解方法
- Swift Property
- Python sys.path详解
- 关于vue+element-ui项目的分页,返回默认显示第一页的问题解决
- sys.argv的意义[转]
- Java面试必问之Hashmap底层实现原理(JDK1.7)
- vue学习笔记(四)