作者:心叶
时间:2018-05-01 18:30

H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下:

1.sessionStorage:保存的是一个会话的数据,也就是说只在一次会话中有效,关闭就会销毁数据,不是持久的本地数据存储,只是一个会话的存储;

2.localStorage:本地数据持久化存储,在操作上和第一种没有什么区别,只是存储时间上不同。

第一步:基本操作。

1.把value存储到key字段:.setItem( key, value)。

sessionStorage.setItem("key", "value");

localStorage.setItem("key", "value");

2.获取指定key本地存储的值:.getItem(key)。

var value=sessionStorage.getItem("key");

var value=localStorage.getItem("key");

3.删除指定key本地存储的值:.removeItem( key)。

sessionStorage.removeItem("key");

localStorage.removeItem("key");

4.清除所有的key/value:.clear()。

sessionStorage.clear();

localStorage.clear();

第二步:其它操作。

storage除了可以用上面说到的方法获取和存储数据,还可以和普通的对象一样,使用点操作和[]来控制数据(下面以localStorage为例子):

var storage = window.localStorage;

storage.info='通过点设置数据';

//通过[]获取数据
var infoValue=storage['info'];

可以通过storage的key()和length实现数据的遍历:

var storage = window.localStorage;

for (var i = 0, len = storage.length; i < len; i++) {

    var key = storage.key(i);

    var value = storage.getItem(key);

    console.log(key + "=" + value);

}

第三步:storage事件(针对localStorage)。

localStorage提供了一个事件storage,当键值改变或者clear的时候,就可以触发storage事件(注册storage和改变值要在不跨域的情况下存在于二个页面),如下面的例子:

//页面A.html里面的js代码(为了简化代码,注册事件没有考虑兼容性)
window.addEventListener("storage", function (event) { alert(event.newValue); }); //页面B.html里面的js代码
localStorage.clear(); localStorage.setItem('key', 'value');

把页面A.html和B.html放正同一个域名下的HTTP服务器里,先打开A.html页面,再打开B.html页面,就可以看见效果了。

上面A.html注册事件的event对象一共有下面几个属性:

1.key:字符串类型,表示被修改,删除或添加的条目的key值;

2.oldValue:表示之前的值,如果是添加一个条目就返回null;

3.newValue:表示现在的新值,如果是添加一个条目就返回null;

4.url/uri:字符串类型,表示触发这个事件的页面地址。

H5本地存储:sessionStorage和localStorage的更多相关文章

  1. H5本地存储sessionStorage和localStorage的区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  2. 本地存储sessionStorage 、 localStorage 、cookie整理

    sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...

  3. web本地存储 sessionStorage 和 localStorage

    1.sessionStorage  临时存储 为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载. 2.localStorage 长期存储 与sessionStorage一样,但在 ...

  4. 利用H5本地存储localStorage、sessionStorage

    最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...

  5. H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)

    一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...

  6. h5 本地存储

    H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多, ...

  7. H5本地存储(转)

    H5本地存储  一.本地存储由来的背景         众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是 ...

  8. H5本地存储详解

    H5之前存储数据一般是通过 cookie ,但是 cookie 存的数据容量比较少.H5 中扩充了文件存储能力,可存储多达 5MB 的数据.现在就实际开发经验来对本地存储 ( Storage ) 的使 ...

  9. 本地存储 cookie,session,localstorage( 一)基本概念及原生API

    http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...

  10. HTML5教程之本地存储SessionStorage

    SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...

随机推荐

  1. C# Md5Hash

    /// <summary> /// MD5 32位加密(大写) /// </summary> /// <param name="str">< ...

  2. Java变量,作用域,常量

    JAVA变量,作用域,常量 变量 变量是什么:就是可以变化的量! Java是一种强类型的语言,每变量都必须声明其类型. Java变量是程序中最基本的存储单元,其要素包括:变量名,变量类型和作用域 格式 ...

  3. 公司内部一次关于OOM故障复盘分享

    最近笔者有点忙,这次OOM事故发生过去两周前,记得笔者那天正带着家人在外地玩,正中午跟友人吃饭的时候,钉钉连续告警爆表,接着就是钉钉电话(显示广东抬头)一看就知道BBQ了,又一次故障发生了,今天把那次 ...

  4. Flask Web开发读书笔记

    开篇:目前想自学Flask Web开发--基于Python,找了几本书准备啃啃,同时也会分享读书笔记.希望和大家一起进步. Flask是小型框架,可以算是微框架,但是他的功能还是比较多 Flask有三 ...

  5. nf-Press —— 在线文档也可以加载组件和编写代码

    如果帮助文档可以加载组件,那么在介绍的同时就可以运行演示demo,是不是很酷? 如果可以在线修改运行代码,那么是不是更容易理解? 上一篇 https://www.cnblogs.com/jyk/p/1 ...

  6. 阿里云开源镜像站支持IPv6访问

    阿里云开源镜像站在国内企业镜像站中率先支持IPv6访问! 点击立即试用https://developer.aliyun.com/mirror/ 同时基于阿里云OpenSearch的搜索能力,开源镜像站 ...

  7. 什么?Android上面跑Linux?

    前言 众所周知,现在程序员因为工作.个人兴趣等对各种系统的需求越来越大,部分人电脑做的还是双系统.其中,比较常见的有各种模拟器.虚拟机在windows上面跑Android.Linux,大家估计都习以为 ...

  8. Java的自动装箱与拆箱(Autoboxing and unboxing)

    一.什么是自动装箱拆箱 很简单,下面两句代码就可以看到装箱和拆箱过程 1 //自动装箱 2 Integer total = 99; 3 4 //自动拆箱 5 int totalprim = total ...

  9. 【freertos】002-posix模拟器设计与cortex m3异常处理

    目录 前言 posix 标准接口层设计 模拟器的系统心跳 模拟器的task底层实质 模拟器的任务切换原理 cortex M3/M4异常处理 双堆栈指针 双操作模式 栈帧 EXC_RETURN 前言 如 ...

  10. Linux 环境部署Skywalking支持Elasticsearch

    一.环境准备 1.Java JKD 1.8(建议) 2.Elasticsearch 3.Skywalking 二. 环境搭建 安装Skywalking分为两个步骤: a.安装Backend后端服务 b ...