H5 存储数据sessionStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<pre>
sessionStorage的使用：存储数据到本地。存储的容量5mb左右。
1.这个数据本质是存储在当前页面的内存中-意味着其它页面和浏览器无法获取数据
2.它的生命周期为关闭当前页面，关闭页面，数据会自动清除 setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容
</pre><br>
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<input type="button" value="清空数据" id="emptyData">
<script>
/*存储数据*/
document.querySelector("#setData").onclick=function(){
/*获取用户名*/
var name=document.querySelector("#userName").value;
/*存储数据*/
window.sessionStorage.setItem("userName",name);
}
/*获取数据*/
document.querySelector("#getData").onclick=function(){
/*如果找不到对应名称的key,那么就会获取null*/
var name=window.sessionStorage.getItem("userName");
alert(name);
}
/*删除数据*/
document.querySelector("#removeData").onclick=function(){
/*在删除的时候如果key值错误，不会报错，但是也不会删除数据*/
window.sessionStorage.removeItem("userName");
}
/* 清空数据 */
document.querySelector("#emptyData").onclick=function () {
window.sessionStorage.clear ();
}
</script>
</body>
</html>
H5 存储数据sessionStorage的更多相关文章
- vue 本地存储数据 sessionStorage
在vuex 下的 action下的userAction.js中添加 export function login(from, self) { axPost('/api/login', from, fun ...
- H5本地存储：sessionStorage和localStorage
作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...
- HTML5学习笔记之客户端存储数据方法：localStorage(),sessionStorage()
HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...
- 数据存储之Web存储（sessionStorage localStorage globalStorage ）
Web Storage 两个目标 提供一种在cookie之外的存储会话守数据的途径 提供一种存储大量可以跨会话存在的数据机制 最初的Web Storage规范包含两个对象 sessionStorage ...
- JS 客户端（浏览器）存储数据之 localStorage、sessionStorage和indexDB
基本概念 1.localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式,在IE7以上以及大多数浏览器都是支持的 2.localStorage和sessionS ...
- h5 localStorage和sessionStorage浏览器数据缓存
sessionStorage 会话数据,localStorage 没有过期时间 两个的API基本都一样的 基本的使用 // 保存一个数据 sessionStorage.setItem('key', ' ...
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- 本地存储 localStorage/sessionStorage/cookie
cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
随机推荐
- IUAP--单点登录
登录组件: 提供统一的登录组件 身份.证明验证身份 支持多种身份标识,用户名.邮箱.手机号 支持多个域,从与得到用户响应的角色,权限进行验证用户时候能进行操作. 支持会话管理和安全管理 支持多种验证策 ...
- linux守护进程配置文件
守护进程是一种运行在非交互模式下的程序.一般来说,守护进程任务是和联网区域有关的:它们等待连接,以便通过连接提供服务.Linux 可以使用从 Web 服务器到 ftp 服务器的很多守护进程. /etc ...
- 【水滴石穿】react-native-video-project
感觉这个是很有才华的博主,毕竟是可以在npm 包里面留后门的程序员 博主的gihtub关于这个项目的地址是:https://github.com/ikimiler/react-native-video ...
- NOIP2016提高A组模拟9.28总结
这次三道题都是可以AC的. 每道题思路都正确,但每道题都有细节没有注意. 第一题 1.没注意系数为1时可以省略系数: 2.没注意在第一项处理常数后,不能输出+号. 导致丢失20分:一定要多出特殊数据, ...
- sping,springMVC @Component 注解的对象都是单例模式，变量不能全局
错误方式: 将属性和变量定义为全局,单例模式,所有人共享,导致所有人的数据都发生错误! 正确方式 一: 将变量定义到局部,互不影响. 正确方式 二: 假如必须放到全局所有方法 ...
- 简单线性回归（最小二乘法）python实现
简单线性回归(最小二乘法)¶ 0.引入依赖¶ In [7]: import numpy as np import matplotlib.pyplot as plt 1.导入数据¶ In [ ...
- Java练习 SDUT-3339_计算长方形的周长和面积（类和对象）
计算长方形的周长和面积(类和对象) Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 设计一个长方形类Rect,计算长方形 ...
- 阿里开源新一代 AI 算法模型，由达摩院90后科学家研发
最炫的技术新知.最热门的大咖公开课.最有趣的开发者活动.最实用的工具干货,就在<开发者必读>! 每日集成开发者社区精品内容,你身边的技术资讯管家. 每日头条 阿里开源新一代 AI 算法模型 ...
- React 从零搭建项目 使用 create-react-app脚手架
一.安装 npm install -g create-react-app 版本校验:create-react-app --version 二.创建项目 create-react-app指令默认调用np ...
- java执行sql语句使用别名时显示Column '***' not found
java执行sql语句使用别名时显示Column '*' not found 在做一个小项目时遇到个问题,执行sql语句使用别名时总是报sql异常 Column '*' not found,折腾半天终 ...