<!--
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. 小程序中的web-view与h5网页之间的交互

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html web-view 基础库 1.6.4 开始支 ...

  2. Html5 经验

    http://knockoutjs.com/documentation/introduction.html knockout的模式 MVVM 四大重要概念 声明式绑定UI界面自动刷新依赖跟踪模版 一些 ...

  3. jrebel插件的激活

    转 jrebel idea插件激活,亲测可用: 在jrebel server处,写上: http://139.199.89.239:1008/88414687-3b91-4286-89ba-2dc81 ...

  4. 六十、SAP中的加减乘除等算数运算符

    一.代码和显示如下,很奇怪的事情是,负数的负号居然在数字后面

  5. linux下如果指令太长,怎么换行输入;怎么快速删除整行命令;怎么快速移动到命令最前或者最后

    1.范例:如果指令串太长的话,如何使用两行来输出?[dmtsai@study ~]$ cp /var/spool/mail/root /etc/crontab \> /etc/fstab /ro ...

  6. 小程序分享H5页面

    1.在要分享的按钮上写一个跳转 <navigator url="../invite1/invite1"> <button class="invite_b ...

  7. Kubernetes-基于helm安装部署高可用的Redis及其形态探索

    首先是一些关于redis的介绍和其在K8S上的安装过程:https://www.kubernetes.org.cn/3974.html 1.1部署形态 通过上述地址的教程,可以完成redis 的安装和 ...

  8. ping.sh

    扫描整个网段  nmap -sP 10.0.0.0/24 #!/bin/bash ps () { ping $1 -c 3 -w 2 |grep -q "ttl"      #结果 ...

  9. Android Studio Madual作为application的使用以及工作空间和modual的区别

    Android Studio Madual作为application的使用以及工作空间和modual的区别 前言: 写这篇文章的目的是因为自己使用Android Studio开发时进入了一个误区,后面 ...

  10. 大二暑假第一周总结--初次安装配置Hadoop

    本次配置主要使用的教程:http://dblab.xmu.edu.cn/blog/install-hadoop-in-centos/ 以下是自己在配置中的遇到的一些问题和解决方法,或者提示 一.使用虚 ...