1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <pre>
  9. sessionStorage的使用：存储数据到本地。存储的容量5mb左右。
  10.     1.这个数据本质是存储在当前页面的内存中-意味着其它页面和浏览器无法获取数据
  11.     2.它的生命周期为关闭当前页面，关闭页面，数据会自动清除
  12.  
  13.     setItem(key,value):存储数据，以键值对的方式存储
  14.     getItem(key):获取数据，通过指定名称的key获取对应的value值
  15.     removeItem(key):删除数据，通过指定名称key删除对应的值
  16.     clear():清空所有存储的内容
  17. </pre><br>
  18. <input type="text" id="userName"><br>
  19. <input type="button" value="设置数据" id="setData">
  20. <input type="button" value="获取数据" id="getData">
  21. <input type="button" value="删除数据" id="removeData">
  22. <input type="button" value="清空数据" id="emptyData">
  23. <script>
  24.     /*存储数据*/
  25.     document.querySelector("#setData").onclick=function(){
  26.         /*获取用户名*/
  27.         var name=document.querySelector("#userName").value;
  28.         /*存储数据*/
  29.         window.sessionStorage.setItem("userName",name);
  30.     }
  31.     /*获取数据*/
  32.     document.querySelector("#getData").onclick=function(){
  33.         /*如果找不到对应名称的key,那么就会获取null*/
  34.         var name=window.sessionStorage.getItem("userName");
  35.         alert(name);
  36.     }
  37.     /*删除数据*/
  38.     document.querySelector("#removeData").onclick=function(){
  39.         /*在删除的时候如果key值错误，不会报错，但是也不会删除数据*/
  40.         window.sessionStorage.removeItem("userName");
  41.     }
  42.     /* 清空数据 */
  43.     document.querySelector("#emptyData").onclick=function () {
  44.         window.sessionStorage.clear ();
  45.     }
  46. </script>
  47. </body>
  48. </html>

H5 存储数据sessionStorage的更多相关文章

  1. vue 本地存储数据 sessionStorage

    在vuex 下的 action下的userAction.js中添加 export function login(from, self) { axPost('/api/login', from, fun ...

  2. H5本地存储：sessionStorage和localStorage

    作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...

  3. HTML5学习笔记之客户端存储数据方法：localStorage(),sessionStorage()

    HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...

  4. 数据存储之Web存储（sessionStorage localStorage globalStorage ）

    Web Storage 两个目标 提供一种在cookie之外的存储会话守数据的途径 提供一种存储大量可以跨会话存在的数据机制 最初的Web Storage规范包含两个对象 sessionStorage ...

  5. JS 客户端（浏览器）存储数据之 localStorage、sessionStorage和indexDB

    基本概念 1.localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式,在IE7以上以及大多数浏览器都是支持的 2.localStorage和sessionS ...

  6. h5 localStorage和sessionStorage浏览器数据缓存

    sessionStorage 会话数据,localStorage 没有过期时间 两个的API基本都一样的 基本的使用 // 保存一个数据 sessionStorage.setItem('key', ' ...

  7. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  8. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

  9. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

随机推荐

  1. c中函数指针和回调函数

    函数指针: 指向函数的指针.(定义的函数会分配一块内存,同变量一样存在首地址)示例如下: int Func(int x); /*声明一个函数*/ int (*p) (int x); /*定义一个函数指 ...

  2. ubuntu上安装字体

    # fc-list # sudo apt-get -y install fontconfig xfonts-utils # sudo cp       XXX.ttf        /usr/shar ...

  3. Python编码---转自金角大王

    本节内容 编码回顾 编码转换 Python的bytes类型 编码回顾 在备编码相关的课件时,在知乎上看到一段关于Python编码的回答 这哥们的这段话说的太对了,搞Python不把编码彻底搞明白,总有 ...

  4. MUI - myStorage在ios safari无痕浏览模式下的解决方案

    myStorage在ios safari无痕浏览模式下的解决方案 今天看到了这个帖子LocalStorage 在 Private Browsing 下的一个限制, 吓尿了,如果用户开启了无痕浏览,ap ...

  5. ios7.1安装提示"无法安装应用程序 由于证书无效"的解决方式二（dropbox被封项目转移到Appharbor上）

    6月18日起dropbox被天朝封了(这个真是无力吐槽),而ios7.1要求使用ssl安全连接,则须要又一次找到一个支持https的免费server. Appharbor是个不错的选择,操作简单.此外 ...

  6. 在WPF中使用谷歌地图和高德地图

    原文:在WPF中使用谷歌地图和高德地图 在桌面软件开发中可能会遇到这样的需求:显示地图. 常用的地图API有Google Map和高德地图.二者都提供了各种平台的API. 为了方便集成,本文使用Jav ...

  7. oracle函数 TO_MULTI_BYTE(c1)

    [功能]将字符串中的半角转化为全角 [参数]c1,字符型 [返回]字符串 [示例] SQL> select to_multi_byte('高A') text from dual; test -- ...

  8. cume_dist()，名次分析——-最大排名/总个数

    函数:cume_dist() over(order by id) select id,area,score, cume_dist() over(order by id) a, --按ID最大排名/总个 ...

  9. tomcat不能多次startup.sh，异常时直接，分析logs目录下的日志。

    tomcat不能多次startup.sh,异常时直接干掉其进程. 分析logs目录下的日志.

  10. angular input框点击别处 变成不可输入状态

    <input type="text" ng-model="edit" ng-disabled="!editable" focus-me ...