<!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++ 之手写strcpy

    char *strcpy(char* strDest, const char*strSrc){ assert(strDest != NULL&&strSrc != NULL); cha ...

  2. 第二周<岭回归>

    传统最小二乘法缺乏稳定性 额.就是曾加正则项 \( argmin||Xw-y||^2+\alpha||w||^2 \) 对应矩阵的求解方法为 \(w=(X^TX+\alpha*I)^{-1}X^Ty\ ...

  3. 【水滴石穿】RNNewsGo

    项目地址为:https://github.com/ImVeryGood/RNNewsGo 我们先来看一下页面 分析了一下项目,项目也是有用到redux-saga的 然后模块比较清晰 接下来我们分析代码 ...

  4. git gc干了啥

    前几天在写升级项目的时候发现./git/objects/pack/下的idx和pack文件是只读的,用java在windows下删除会抛异常,然后把只读属性改掉就好了. 于是就想弄清楚这两个文件的作用 ...

  5. 深入浅出Cocoa 之动态创建类【转】

    在前文<深入浅出Cocoa之类与对象>一文中,我已经详细介绍了ObjC中的 Class 与 Object 的概念,今天我们来如何在运行 时动态创建类.下面这个函数就是应用前面讲到的Clas ...

  6. 六.基本数据结构-双端队列（Deque）

    一.双端队列(Deque) - 概念:deque(也称为双端队列)是与队列类似的项的有序集合.它有两个端部,首部和尾部,并且项在集合中保持不变. - 特性:deque 特殊之处在于添加和删除项是非限制 ...

  7. swift 风骚的Guard语法

    http://blog.csdn.net/pjk1129/article/details/48627153#0-qzone-1-64255-d020d2d2a4e8d1a374a433f596ad14 ...

  8. [框架]eclipse搭建ssm框架 一 标签： eclipsetomcat框架 2017-03-25 21:28 1085人阅读 评论(

    虽然现在也做过一些项目,但是自己从头搭起来的框架几乎没有,所以这两天自己搭了一下ssm的框架,下面写一下框架的搭建过程.并且给出增删改查四条线来方便大家熟悉代码. 环境准备 maven3.2.3 ec ...

  9. bzoj1821 部落划分

    Description 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落之间则经常发生争斗.只是,这一切都成 ...

  10. 【Django入坑之路】Django与Query Ajax的交互

    1:Jquery.ajax后端交互数据 $.ajax({ Url: /路由处理/, Type: GET/POST, #传送请求类型 Data: {user: “ XXXX”,pass:”XXXX”}, ...