<!--
sessionStorage的使用:存储数据到本地。存储的容量5mb左右
1.这个数据本质是储存在当前页面的内存中
2.他的生命周期为关闭当前页面,关闭页面,数据会自动清楚 setTtem(key,value):存储数据,以键值对的方式储存
getItem(key):获取数据,通过制定名称的key获取对应的value值
removeItme(key):删除数据,通过制定名称key删除对应的值
clear():清空所有存储的内容
-->
<input type="text" id="username"><br/>
<input type="button" value="设置数据" id="setData"><br/>
<input type="button" value="获取数据" id="getData"><br/>
<input type="button" value="删除数据" id="removeData"><br/> <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");
}
</script>

h5-sessionStorage储存的使用的更多相关文章

  1. H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  2. 解析H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  3. sessionStorage 退出登录删除sessionStorage储存

    1 登录后在sessionStorage中添加token的值,退出后清空 登录后在sessionStorage中添加token的值,退出后清空 localStorage 和 sessionStorag ...

  4. html5 说明

    # 客户端储存历程 远古时期 cookies的用法和缺陷 userdata   HTML5时代 localstorage application cache 离线缓存 indexedeDB 客户端数据 ...

  5. JQuery中的表单验证及相关的内容

      前  言 JRedu Android应用开发中,经常要用到表单.既然用到了表单,那就不可避免的要用到表单的验证.但是,在提交表单时,但是,并不是,每次提交的表单内容都是正确的,如果 每次都将表单的 ...

  6. HTML5 的web储存: localStorage & sessionStorage

    早期的浏览器使用cookie储存,HTML5新增web储存,包括:localStorage 和 sessiongStorage; localStorage:可以永久储存: sessionStorage ...

  7. 关于H5本部缓存localStorage,sessionStorage

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  8. 3分钟学会sessionStorage用法(h5页面返回滚动到上次浏览器位置)

    前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...

  9. 浏览器本地储存方式有哪些?cookie、localStorage、sessionStorage

    现阶段,浏览器提供的储存方式常用的有三种,cookie.localStorage.sessionStorage 1.cookie 概念:cookie 是浏览器中用于保存少量信息的一个对象 基本特征: ...

  10. h5的localStorage和sessionStorage

    今天做了个首页的弹窗,要求是打开时显示弹窗,然后点击关闭按钮时弹窗关闭,然后点击不再显示,之后再刷新就不会有弹窗,总结一下需求. 1.弹窗显示隐藏 这个很容易,我们可以用display:none和di ...

随机推荐

  1. ffmpeg 多路实时问题之解决思路

     记得前面有人提出多路视频不实时问题,这个首先需要从网络带宽上查看是否视频帧全实时的到达,还有一个问题就是,即使视频帧全部到达,看起CPU也是足够的,但是却表现为慢镜头这种样子,那么很可能是解码显示的 ...

  2. Redis哨兵机制原理

    1.概述 Redis Sentinel是一个分布式系统,为Redis提供高可用性解决方案.可以在一个架构中运行多个 Sentinel 进程(progress), 这些进程使用流言协议(gossip p ...

  3. Django--评论功能实现和用户登录

    1.确定实现评论功能的方式 1.第三方社会化评论插件(有言.多说.网易云跟帖等) 优点:可以直接用,紧急时开发快 缺点:评论存储在第三方,第三方挂了就不弄用 2.Django评论库 django-co ...

  4. 5. 支撑高并发,高可用,海量数据备份恢复的Redis重要性

    商品详情页的架构实现 缓存架构 第一块儿,要掌握的很好的,就是redis架构 高并发,高可用,海量数据,备份,随时可以恢复,缓存架构如果要支撑这些要点,首先呢,redis就得支撑 redis架构,每秒 ...

  5. 好记性不如烂笔头--shell参数及shell判断if系列

    $0 当前脚本的文件名$n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例如,第一个参数是$1,第二个参数是$2$# 传递给脚本或函数的参数个数$* 传递给脚本或函数的所有参数$@ 传递给 ...

  6. Spring Cloud Alibaba:Sentinel实现熔断与限流

    一.什么是Sentinel Sentinel,中文翻译为哨兵,是为微服务提供流量控制.熔断降级的功能,它和Hystrix提供的功能一样,可以有效的解决微服务调用产生的“雪崩效应”,为微服务系统提供了稳 ...

  7. 黑马oracle_day01:02.oracle的基本操作

    01.oracle体系结构 02.oracle的基本操作 03.oracle的查询 04.oracle对象 05.oracle编程 02.oracle的基本操作 PLSQL中文乱码问题解决1.查看服务 ...

  8. SpringMVC: Ajax技术

    SpringMVC:Ajax技术 简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网 ...

  9. Vim中的基本操作

    Vim中的基本操作 vim介绍.实验知识点.Vim中的六种基本模式 2.1 vim 6种模式介绍 从vi衍生出来的Vim具有多种模式,这种独特的设计容易使初学者产生混淆.几乎所有的编辑器都会有插入和执 ...

  10. P1031 查验身份证

    转跳点: