H5 Web存储技术

前言

web存储技术在初期的时候被定义为HTML5的一部分作为其API。后来被独立出来作为一份独立的标准。

web存储标准包含localStorage对象和sessionStorage对象。

这两个对象实际上是持久化关联数组，是名值对的映射表，“名”和“值”都是字符串。Web存储易于使用、支持大容量(但非无限量)数据存储同时兼容当前所有主流浏览器。

通过web存储技术，可以让一些本地应用数据存储变得更加的方便。

介绍

Web Storage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是：提供一种在cookie之外存储会话数据的途径以及提供一种存储大量可以跨会话存在的数据的机制

Web Storage分成两类：sessionStorage和localStorage。sessionStorage保存的数据用于浏览器的一次会话，当会话结束(通常是该窗口关闭)，数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的属性和方法完全一样

它们很像cookie机制的强化版，能够动用大得多的存储空间。目前，每个域名的存储上限视浏览器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存储空间由一级域名决定，而其他浏览器没有这个限制。也就是说，在Firefox中，a.example.com和b.example.com共享5MB的存储空间。另外，与Cookie一样，它们也受同域限制。某个网页存入的数据，只有同域下的网页才能读取

通过检查window对象是否包含sessionStorage和localStorage属性，可以确定浏览器是否支持这两个对象

注意：IE浏览器不支持在本地使用storage。

基本操作

存储数据

sessionStorage和localStorage保存的数据，都以“键对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存

注意：Storage类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串

1、setItem()

我们可以通过setItem()方法来存储数据。接受两个参数，第一个参数是键名，第二个参数是键值也就是保存的数据。

一定要注意，在不同的浏览器当中，存储的storage位置并不一样，不能通用。

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

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

2、getItem()

我们可以通过getItem()方法读取数据。接受一个参数，就是键名。

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

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

3、通过属性操作的形式存取数据

除了使用setItem()和getItem()方法，还可以采用属性操作的形式来操作数据。

localStorage.setItem("key1","value1");

localStorage.testkey = 'testvalue';

console.log(localStorage.getItem('testkey'));//'testvalue'

console.log(localStorage.key1);//'value1'

清除数据

1、removeItem()

removeItem()方法用于清除某个键名对应的数据。

注意：清除不存在的键名不会报错，只会静默失败

sessionStorage.removeItem('key');

localStorage.removeItem('key');

除了使用removeItem()方法，还可以使用delete操作来清除数据.

注意：IE7-浏览器不支持delete操作符来清除storage数据

localStorage.setItem("key1","value1");

delete localStorage.key1;

console.log(localStorage.key1);//undefined

console.log(localStorage.getItem('key1'));//null

2、clear()

clear方法用于清除所有保存的数据。

sessionStorage.clear();

localStorage.clear();

遍历操作

1、key()

key(index)方法返回index位置处的值的名字。

sessionStorage.setItem("key1","value1");

sessionStorage.setItem("key2","value2");

console.log(sessionStorage.key(0));//'key1'

console.log(sessionStorage.key(1));//'key2'

console.log(sessionStorage.key(2));//null

2、length

length属性返回名值对儿的个数。

console.log(sessionStorage.length);//2

我们利用length 和 key 可以遍历所有的键。

for(var i = 0; i < localStorage.length; i++){

    var key = localStorage.key(i);

    var value = localStorage.getItem(key);

}

还可以使用for-in循环来迭代。

for(var key in localStorage){

    var value = localStorage.getItem(key);

}

存储事件

首先，要特别注意的是，该事件只发生在window对象上，在document对象上触发无效，且使用DOM0级、DOM2级事件处理函数都可以

无论对sessionStorage还是localStorage进行操作，都会触发storage事件。当通过属性或setItem()方法保存数据，使用delete操作符或removeItem()删除数据，或者调用clear()方法时，都会发生该事件

注意：只有当存储数据真正发生改变的时候才会触发存储事件。像给已经存在的存储项设置一个一模一样的值，抑或是删除一个本来就不存在的存储项都是不会触发存储事件的。通过getItem()方法获取数据也不会触发该事件

一般地，storage事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变sessionStorage或localStorage的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发storage事件。可以通过这种机制，实现多个窗口之间的通信

注意：IE8-浏览器不支持storage事件，IE9+浏览器与其他标准浏览器有所不同，无论数据真实值是否变化，只要对数据进行设置或删除，都会触发该事件，且原始页面和同一域名下的其他页面都会触发

这个事件的event对象有以下属性.

url:触发事件的链接地址

key:设置或者删除的键名

newvalue:如果是设置值，则是新值；如果是删除键，则是null

oldValue:键被更改之前的值

storageArea:返回触发事件的对象

下面是一个事件的应用案例：

a.html:

<!DOCTYPE html>

<html lang="zh">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<title>多页面之间的通讯</title>

</head>

<body>

	<h1>多页面之间的通讯</h1>

	<!-- 在当前页面改变数据，会触发b页面的事件，但是当前页面不会触发 -->

	请输入你的留言： <br>

	<textarea name="" id="txt1" cols="50" rows="10" style="font-size: 30px;"></textarea>

	<button id="btn">点击存储</button>

	<hr>

	<iframe src="./b.html" frameborder="1" width="773" height="346"></iframe>

</body>

<script>

	// let user_name = "zhangsan";

	let btn = document.getElementById('btn');

	btn.onclick = function() {

		// 点击按钮获取用户输入的值

		let user_info = document.getElementById('txt1').value;

		// 向本地存储数据

		localStorage.setItem('zhangsan-1',user_info);

	}

	window.onstorage = function () {

		console.log("hello,world!");

	};

</script>

</html>

b.html

<!DOCTYPE html>

<html lang="zh">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<title>多页面之间的通讯</title>

</head>

<body>

	<script>

		window.onstorage = function (e) {

			var e = e || window.event;

			document.body.innerHTML = e.newValue;

		};

	</script>

</body>

</html>

H5本地存储技术的更多相关文章

  1. H5本地存储技术和微信小程序中的本地存储

    1.H5的本地存储 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. H5的本地存储技术及其与Cookie的比较

    第一部分: H5的本地存储技术 HTML5 提供了两种在客户端存储数据的新方法.先看下面的例子: 例1:var mySelection = {name:"car", amount: ...

  3. H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）

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

  4. H5本地存储（转）

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

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

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

  6. h5 本地存储

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

  7. localStorage本地存储技术

    localStorage 本地存储技术 本地存储技术,“不是永久的永久存储” 特点: 将数据存储到浏览器当中 存储的数据都是以字符串的形式存储的 和传统的数据库相比: 优点: 操作简单,容易学习 数据 ...

  8. H5本地存储详解

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

  9. H5 本地存储一

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

随机推荐

  1. 布隆算法（BloomFilter）

          BloomFilter算法,是一种大数据排重算法.在一个数据量很大的集合里,能准确断定一个对象不在集合里:判断一个对象有可能在集合里,而且占用的空间不大.它不适合那种要求准确率很高的情况, ...

  2. 从零开始实现一个简易的Java MVC框架(三)--实现IOC

    Spring中的IOC IoC全称是Inversion of Control,就是控制反转,他其实不是spring独有的特性或者说也不是java的特性,他是一种设计思想.而DI(Dependency ...

  3. （六）监控磁盘IO

    (1)被监控端配置 #vi /etc/zabbix/zabbix_agentd.conf UnsafeUserParameters= UserParameter=custom.vfs.dev.read ...

  4. 与word、excel交互问题总结

    不同版本的Office对应的型号不同,往往问题出现在注册表中有多个版本,所以程序运行经常提示错误. 1.找不到引用microsoft.office.core解决办法 (引用中有感叹号,说明引用不成功) ...

  5. 【Python之路】特别篇--Python装饰器

    前情提要 1. 作用域 在python中,函数会创建一个新的作用域.python开发者可能会说函数有自己的命名空间,差不多一个意思.这意味着在函数内部碰到一个变量的时候函数会优先在自己的命名空间里面去 ...

  6. 《剑指offer》算法题第六天

    今日题目: 顺时针打印矩阵 包含min函数的栈 栈的压入.弹出序列 从上到下打印二叉树 二叉树搜索树的后序遍历序列 二叉树中和为某一值的路径 今天的题目都比较简单,下面一一介绍: 1. 顺时针打印矩阵 ...

  7. 第03组 Alpha冲刺（4/4)

    队名:不等式方程组 组长博客 作业博客 团队项目进度 组员一:张逸杰(组长) 过去两天完成的任务: 文字/口头描述: 制定了初步的项目计划,并开始学习一些推荐.搜索类算法 GitHub签入纪录: 暂无 ...

  8. 8.1 HTML基础知识点

    8.1 HTML基础知识点 一.HTML是什么? Hyper Text Markup Language 超文本标记语言 的缩写 开发一个html文件,可以有很多方式 :比如Dreamweaver,HB ...

  9. redis 提供 6种数据淘汰策略

    淘汰策略的原因 在 redis 中,允许用户设置最大使用内存大小 server.maxmemory,在内存限定的情况下是很有用的.譬如,在一台 8G 机子上部署了 4 个 redis 服务点,每一个服 ...

  10. 如何用Sha256进行简单的加密或者解密

    个人是今天第一次使用Sha256对数据进行加密操作,以往都是直接使用MD5加密最多也就是加盐之后再进行加密 不过可能是个人应用的只是简单的一个对数据的加密,所以感觉目前和MD5差距并不是很大. 1.首 ...