js 使用sessionStorage总结与实例
作用：它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空
sessionStorage的方法
setItem存储value
用途：将value存储到key字段
sessionStorage.setItem("key", "value");
getItem获取value
用途：获取指定key本地存储的值
var value = sessionStorage.getItem("key");
removeItem删除key
用途：删除指定key本地存储的值
sessionStorage.removeItem("key");
clear清除所有的key/value
用途：清除所有的key/value
sessionStorage.clear();
sessionStorage的key和length属性实现遍历
sessionStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：
var storage = window.sessionStorage;
for(var i=0, len=storage.length; i<len;i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
实例:
<!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.clear(msg); //清除本地所有的key/value
sessionStorage.removeItem("data");
}
}
</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>
结果：
js 使用sessionStorage总结与实例的更多相关文章
- js生成随机数的方法实例总结 [收藏]
js生成随机数的方法实例总结 js生成随机数主要用到了内置的Math对象的random()方法.用法如:Math.random().它返回的是一个 0 ~ 1 之间的随机数.有了这么一个方法,那生成任 ...
- js使用sessionStorage、cookie保存token
本文是参考别人的博客写的,图片直接用的别人的 1.Token:token是客户端频繁向服务器端请求数据,服务器频繁的去数据库查询用户名和密码进行对比,判断用户名和密码正确与否,并作出相应的提示,在这样 ...
- BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...
- JS判断不能为空实例代码
JS判断不能为空实例代码.分享在此. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...
- JS JSOP跨域请求实例详解
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...
- js的dom测试及实例代码
js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...
- 原生JS编写的照片墙效果实例演示特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS的window.location应用实例
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面. Window Locationwindow.location 对象在编写时可不使用 window ...
- js通过sessionStorage实现的返回上一页
通常,我们都会使用比较熟悉的javascript:history.go(-1)来实现返回上一页,此种方法有一个问题就是返回上一页后不能刷新当前页面,给我们的开发带来了一定的不便,显然有时这种方法就不是 ...
随机推荐
- 如何解决AndroidStudio下载资源慢的问题
https://blog.csdn.net/LiangJianxiong/article/details/87881150方法1.build.gradle里的buildscript和allprojec ...
- UML 2.5版本与UML分类概述
UML 2.5版本与UML分类概述 转 http://www.umlstudy.com/uml-25-diagrams.html UML简述 UML图是设计.实现或已经存在的系统模型的部分图形表示(视 ...
- Sqlite轻量级数据库
SQLite,是一款轻量型的数据库,是遵守ACID(原子性.一致性.隔离性.持久性)的关联式数据库管理系统,多用于嵌入式开发中. SQLite的数据类型:Typelessness(无类型), 可以保 ...
- 深度学习之Faster-R-CNN
哎!还是看大神博客吧 https://blog.csdn.net/liuxiaoheng1992/article/details/81843363
- Java注解(Annotation)详解
转: Java注解(Annotation)详解 幻海流心 2018.05.23 15:20 字数 1775 阅读 380评论 0喜欢 1 Java注解(Annotation)详解 1.Annotati ...
- setMaxActive和setMaxWait方法
在dbcp2中,setMaxActive和setMaxWait这两个方法已经改为其他名称,具体如下: setMaxActive -> setMaxTotal void org.apache.co ...
- Ansible-galera
在四台虚拟机上都安装好docker 一.控制节点 1. 域名解析 [root@d ansible]# vim /etc/hosts [root@d ansible]# scp /etc/hosts n ...
- spring-boot集成6：集成redis实现字典缓存功能
Why redis? redis是基于内存的key-value系统,可以用作缓存中间件或者消息中间件,spring-boot提供了方便的方式和redis集成. 1.maven依赖 <!--red ...
- uni-app 实现热更新
前端打包 app 即把写好的静态资源文件套壳打包成 app ,而热更新即下载并替换 app 内部的静态资源文件,实现 app 的版本升级. 在uni-app 中,我们是如何实现热更新的呢?下面来看代码 ...
- Spring Boot Mybatis简单使用
Spring Boot Mybatis简单使用 步骤说明 build.gradle:依赖添加 application.properties:配置添加 代码编写 测试 build.gradle:依赖添加 ...