05-HTML5强大的新 API，04-web 存储

最新推荐文章于 2022-03-15 19:31:00 发布

L鹿先生

最新推荐文章于 2022-03-15 19:31:00 发布

阅读量163

点赞数

分类专栏： HTML5 文章标签： html5 前端 api

本文链接：https://blog.csdn.net/weixin_44077629/article/details/104763678

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML5 API：

1、文件 API （规范与本地文件进行交互的标准方法）

2、拖放 API （提供了直接支持拖放操作的API）

3、地理定位 （获取地理位置信息）

4、web 存储 （在本地存储用户的浏览数据）	

5、Web SQL	（在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写）

6、应用程序缓存 （创建 web 应用的离线版本。可以在没有网络连接的情况下进行访问。）

7、Web Sockets （在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。）

8、SSE	（网页自动获取来自服务器的更新）

9、Web Workers （web worker 是运行在后台的 JavaScript，不会影响页面的性能）

......

4、web 存储

内容简介：
Web Stroage
本地数据库

Web Stroage存储机制是对HTML4中的cookies存储机制的一个改善。由于cookies存储机制有很多缺点，HTML5中不在使用它，转而使用改良后的web Stroage存储机制。
本地数据库是html5中新增的一个功能，使用它可以在客户端本地建立一个数据库–原本保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

目前为止本地数据库的功能受到了opera Safari chrome 浏览器的支持

可以再客户端保存数据的Web Storage 功能，html4中可以使用cookies在客户端保存诸如用户名等简单的用户信息，但是通过长期的实际使用下来，人们发现用cookies存储永久数据存在以下

几个问题：
大小：cookies 的大小被限制在4kb
带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽
复杂性：要正确的操作cookies是很困难的

这种情况html5中重新提供了一种在客户端本地保存数据的功能，他就是 Web Stroage功能。
Web Storage 功能顾名思义就是在web上存储数据的功能，而这里的存储是针对客户端而言的。具体来说Web Storage 又分两种：

1、sessionStorage
将数据保存在session对象中。所谓session 是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session 对象可以用来保存在

这段时间内所要求保存的任何数据
2、localStorage
将数据保存在客户端本地的硬件设备（通常指硬盘，但也可以是其他硬件设备）中，即使浏览器被关闭了，该数据依然存在，下次打开浏览器访问网站时仍然可以继续使用。
这两者的却别在于，sessionStorage为临时保存，而localStroage为永久保存。

sessionStorage
保存数据：sessionStorage.setItem(key, value);
读取数据：sessionStorage.getItem(key);
localStorage
保存数据：localStorage.setItem(key, value);
读取数据：localStorage.getItem(key);
删除单个:
localStorage.removeItem(“name”);
删除所有的:
localStorage.clear();

那么如何利用Web Storage来保存和读取大量数据呢
利用localStorage 的连个属性：
localStorage.length
localStorage.key(index) 传入下标得到的是键

作为简易的数据库来利用,代码如下：

<table>
	<tr><td>姓名：</td><td><input type="text" id="name"></td></tr>
	<tr><td>电话：</td><td><input type="text" id="tel"></td></tr>
	<tr><td></td><td><input type="button" value="保存" onclick="saveStorage()"></td></tr>
</table>
<p>
检索：<input type="text" id="find">
	<input type="button" value="检索" onclick="findStorage('msg')">
</p>
<p id="msg"></p>

js:
function saveStorage(){
	var data = new Object;
	data.name = document.getELementById('name').value;
	data.tel = document.getELementById('tel').value;
	var str = JSON.stringify(data);
	localStroage.setItem(data.name, str);
	alert("数据已保存");
}
function findStorage（id）{
	var find = document.getElementById('find').value;
	var str = localStorage.getItem("find");
	var data = JSON.parse(str);
	var result = data.name + '<br>';
	result += data.tel;
	var target = document.getElementById(id);
	target.innerHTML = result;
}

当你打开页面填写信息时，填写一半，不小心关了，然后再打开页面填写的信息不在了，还得重新填写，很烦，用localStorage可以解决，当再次打开是，会显示之前已经填的，如下：

<body>
	美食：<input type ="checkbox"  value="1">
	体育：<input type ="checkbox"   value="2">
	影视：<input type ="checkbox"   value="3">
	<div>美食</div>
	<div>体育</div>
	<div>影视</div>
</body>
<script>
//BS 和 CS
//BS: B:browser 浏览器  S:服务器  BS系统是依赖浏览器和服务器通信交互的系统。
//网站，web线上系统，网页游戏都属于BS系统

//CS: C:client 客户端 是哪些需要单独在用户本地安装专有客户端的应用。
//QQ, 大型网游（魔兽世界）。

//CS：可以为用户提供更丰富的功能。大型3D场景，丰富的效果特效，往往依赖于本地客户端。BS:具备快速迭代升级，一点更新，全部用户自动升级的特性。

//SPA  单页面应用

//GIS  地理信息系统  //HIS 医疗信息系统  //ERP 企业资源管理系统
//h5带来了新的本地存储手段，新的存储方式可以保存更大的数据量。可以达到M级别。

//localStorage 没有时间限制，但是用户可以手动清缓存方式删除本地存储数据
//sessionStorage 一会话为声明周期存储数据，（会话结束，页面或浏览器关闭）数据自动清空，当然用户也可以主动清缓存方式删除数据。

//localStorage

// $("input[type=checkbox]").each(function(index, item){
// 	if($(item).prop("checked")){
// 		$("div").eq(index).show();
// 	}else{
// 		$("div").eq(index).hide();
// 	}
// });

//定义用户喜好字段 hobby
if(typeof localStorage.hobby === "undefined"){
	$("input[type=checkbox]").prop("checked", true);
	$("div").show();
}else{
	//根据本地存储的用户习惯还原页面
	var values = localStorage.hobby.split(",");
	$.each(values, function(index, item){
		$("input[value="+ item +"]").prop("checked", true);
		$("div").eq(parseInt(item)-1).show();
	});
}

$("input[type=checkbox]").on("click", function(){
	var values = [];
	$("input[type=checkbox]").each(function(index, item){
		if($(item).prop("checked")){
			$("div").eq(index).show();
			values.push($(item).val());
		}else{
			$("div").eq(index).hide();
		}
	});
	localStorage.hobby = values.join();
});
</script>

参考阅读：

L鹿先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-HTML5强大的新 API，04-web 存储

HTML5 API：1、文件 API （规范与本地文件进行交互的标准方法）2、拖放 API （提供了直接支持拖放操作的API）3、地理定位（获取地理位置信息）4、web 存储（在本地存储用户的浏览数据） 5、Web SQL （在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写）6、应用程序缓存（创建 web 应用的离线版本。可以在没有网络连接的情况下进行访问...
复制链接

扫一扫

专栏目录