sessionStorage的用法总结
2024-08-28 21:04:02
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。下面是其用法:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SessionStorage</title>
<script type="text/javascript">
window.onload = function()
{
//首先获得body中的3个input元素
var msg = document.getElementById("msg");//文本框要输入的内容
var getData = document.getElementById("getData");//获取数据
var setData = document.getElementById("setData");//保存数据
var removeData=document.getElementById("removeData");//移除数据
setData.onclick = function()//存入数据
{
if(msg.value)
{
sessionStorage.setItem("data", msg.value);//把data对应的值保存到sessionStorage
alert("信息已保存到data字段中");
}
else
{
alert("信息不能为空");
}
} getData.onclick = function()//获取数据
{
var msg = sessionStorage.getItem("data");
if(msg)
{
alert("data字段中的值为:" + msg);//把data对应的值弹出来
}
else
{
alert("data字段无值!");
}
}
removeData.onclick=function() //移除数据
{
var msg = sessionStorage.getItem("data");
sessionStorage.removeChild(msg);
}
}
</script>
</head>
<body>
<input id="msg" type="text"/>
<input id="setData" type="button" value="保存数据"/>
<input id="getData" type="button" value="获取数据"/>
<input id="removeData" type="button" value="移除数据"/>
</body>
</html>
最新文章
- JackRabbit的前世今生
- ECMAScript 6的解构赋值 ( destructuring assignment)
- 《More Effective C++ 》笔记
- 2.Could not open Selected VM debug port (8700). Make sure you do not have another instance of DDMS or of the eclipse plugin running
- mysql 分区表详解
- leetcode--003 LRU cache
- js立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( ))
- Struts+Hibernate+jsp页面,实现分页
- ROS_Kinetic_11 ROS程序基础Eclipse_C++(二)
- go 并发编程(3)
- MySQL C API概述
- POJ 1384 Piggy-Bank【完全背包】+【恰好完全装满】(可达性DP)
- OpenFlow PacketOut消息机制
- .Net Core HTML解析利器之HtmlAgilityPack
- javascript的防篡改对象之preventExtensions()方法
- android studio 卡慢的问题(android studio 3.0)
- Linux内核代码
- poj 3345 Bribing FIPA (树形背包dp | 输入坑)
- css中的f弹性盒子模型的应用案例
- CentOS 7 升级内核 Kernel