H5本地存储:sessionStorage和localStorage
作者:心叶
时间: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的更多相关文章
- H5本地存储sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...
- 本地存储sessionStorage 、 localStorage 、cookie整理
sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...
- web本地存储 sessionStorage 和 localStorage
1.sessionStorage 临时存储 为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载. 2.localStorage 长期存储 与sessionStorage一样,但在 ...
- 利用H5本地存储localStorage、sessionStorage
最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...
- H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)
一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...
- h5 本地存储
H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多, ...
- H5本地存储(转)
H5本地存储 一.本地存储由来的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是 ...
- H5本地存储详解
H5之前存储数据一般是通过 cookie ,但是 cookie 存的数据容量比较少.H5 中扩充了文件存储能力,可存储多达 5MB 的数据.现在就实际开发经验来对本地存储 ( Storage ) 的使 ...
- 本地存储 cookie,session,localstorage( 一)基本概念及原生API
http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...
- HTML5教程之本地存储SessionStorage
SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...
随机推荐
- Python 并发编程(上)
Python 并发编程 参考文献:https://gitee.com/wupeiqi/python_course 并发编程:提升代码执行的效率.原来需要 10 分钟执行,并发处理后可以加快到 1 分钟 ...
- Django的models由数据库表生成
Django的models由数据库表生成 参考文献:https://www.cnblogs.com/sukura/p/14306510.html 目的或效果:方便实现使用django原生的后台管理系统 ...
- LeetCode-086-分隔链表
分隔链表 题目描述:给你一个链表的头节点 head 和一个特定值 x ,请你对链表进行分隔,使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前. 你应当 保留 两个分区中每个节点的初始相对 ...
- Dubbo是什么?核心总结
Dubbo --是SOA架构的具体的实现框架! 2.1 Dubbo简介 Apache Dubbo是一款高性能的Java RPC框架.官网地址:[http://dubbo.apache.org] dub ...
- 如何写Markdown格式文档
Markdown Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯.它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档.这种语言吸收了很多在电子邮件中 ...
- phpstrom配置Xdebug
采用的是PhpStrom+Xdebug+QQ浏览器(其他浏览器也可以,个人喜好) 1.下载适合的Xdebug插件 下载地址https://xdebug.org/download.php 不知道选用哪个 ...
- 实践1使用XGB实现酒店信息消歧
XGB算法是决策树衍生出来的一种算法 场景:酒店的业务人员希望我们能够提供一个算法服务去为酒店信息做一个自动化的匹配,以通过算法的手段,找到那些确定相同的酒店和确定不同的酒店 以下代码为部分 理解业务 ...
- C#序列化和反序列化(json)
一,什么是Json? json是存储和交换文本信息的方法,类似xml.但是json比xml更小,更快,j更易于解析.并且json采用完全独立于语言的文本格式(即不依赖于各种编程语言),这些特性使jso ...
- [C++] C++socket套接字网络通讯实例
//服务器端:#include "winsock2.h" #include <string>#pragma comment(lib, "ws2_32.lib ...
- k8s.gcr.io、gcr.io仓库的镜像下载
镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 获取这类镜像的方法一般有2种: 1.通过拉取国内镜像仓库的内容(操作简单直接拉取即可,缺点是镜像的版本更新可能较慢,可能无法获取最新的镜像) 2 ...