<!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的更多相关文章

  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​#​字​符​串​与​ ​b​y​t​e​数​据​的​互​相​转​换

    string和byte[]的转换 (C#) string类型转成byte[]: byte[] byteArray = System.Text.Encoding.Default.GetBytes ( s ...

  2. iOS 获取 APP 的 Launch Image

    http://www.cocoachina.com/ios/20151027/13780.html 作者:里脊串 授权本站转载. 启动图(LaunchImage)的管理其实在iOS开始中算比较简单的了 ...

  3. 2019-10-26-Inno-Setup-安装包脚本-Run-的-Flags-标记

    title author date CreateTime categories Inno Setup 安装包脚本 Run 的 Flags 标记 lindexi 2019-10-26 08:42:39 ...

  4. 2019-7-22-WPF-如何判断两个-LinearGradientBrush-相等

    title author date CreateTime categories WPF 如何判断两个 LinearGradientBrush 相等 lindexi 2019-07-22 21:26:2 ...

  5. Java练习 SDUT-2271_Eddy的难题

    Eddy的难题 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 人随着岁数的增长是越大越聪明还是越大越笨,这是一个值得全 ...

  6. 洛谷 P1505 [国家集训队]旅游 树链剖分

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例: 输出样例: 说明 思路 AC代码 总结 题面 题目链接 P1505 [国家集训队]旅游 题目描述 Ray 乐 ...

  7. QT，QLabel添加超链接

    1.方法1:使用信号槽绑定方式 //设置超链接并绑定信号槽QLabel *linkLabel = new QLabel(); linkLabel->setText("<a hre ...

  8. js函数易犯的错误

    1.定义一个js函数时不能写在另一个函数里面. 2.定义一个打开网页自动执行的函数,一定要注意加载的顺序.如果是不是自动执行的,而是等页面加载完后事件触发的,那写在任何地方都没问题. 错误的:

  9. JavaScript--函数中（）的作用

    在函数中参数是函数的时候:function a(函数名) 与 function a(函数名()) 的区别: // 在函数里面() 是一个编组和立即执行的功能 /** * function autoPl ...

  10. 【AtCoder Regular Contest 092】C.2D Plane 2N Points【匈牙利算法】

    C.2D Plane 2N Points 题意:给定N个红点二维坐标N个蓝点二维坐标,如果红点横纵坐标都比蓝点小,那么它们能够构成一组.问最多能构成多少组. 题解:把满足要求的红蓝点连线,然后就是匈牙 ...