html5本地存储

最新推荐文章于 2024-07-18 15:09:36 发布

蒲锦_up

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量4.3k

点赞数

分类专栏： html 文章标签： html5 数据存储

本文链接：https://blog.csdn.net/yueqinglkong/article/details/51501655

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

h5中提供了一种将键值对的数据保存在客户端的标准。跟cookie不同的是，它不会在每次请求服务器的时候上传至服务器(除非你自己实现该功能)，因为这是h5的规范得到了浏览器的很好支持，不需额外的插件之类，h5提供了更大容量的数据存储空间(h5的建议是每个网站提供5M的存储空间)，比cookie的4KB大太多。

h5中提供了两种本地存储机制，一种是存储键值对数据的Web Storage，另外一种是类似数据库形式存储数据的Web SQL Database。

Web Storage

Web Storage提供了两种存储类型的API接口:sessionStorage和localStorage。sessionStorage在会话期间内有效，窗口关闭就没了。localStorage存储在本地，数据永久存储(除非用户或者程序执行删除操作)。两者在用法上完全一致。h5是域内安全的，在该域内的所有页面都可以访问数据。

检测浏览器的支持情况(以localStorage为例)。

if (window.localStorage) {//localStorage
					alert("支持 localStorage")
				}else{
					alert("不支持 localStorage")
				}

操作本地数据,需要注意的是h5只能存储字符串，任何格式存储的时候都会自动转为字符串。

//添加/修改 键值对
					localStorage.itemA = "itemA";
					var itmeB = "itmeB";
					localStorage[itmeB] = "itmeB";
					var itmeC = "itmeC";
					localStorage.setItem(itmeC, "itemC")
					
					//获取键值对
					var valueA=localStorage.itemA;
					var valueB=localStorage[itmeB];
					var valueC=localStorage.getItem(itmeC);
					
					//索引 小标从0开始
					var key=localStorage.key(0);
					//删除某个值
					localStorage.removeItem(itmeB);
					//清空
					localStorage.clear();

也可以存储Json数据。将json转为字符串形式存储，需要的时候取出来转为原来的类型。

var jsonString=JSON.stringify(json);
					var json=JSON.parse(jsonString);

遍历所有存储数据。

var showTxt="";
					var local=window.localStorage;
					for(var i=0;i<local.length;i++){
						showTxt+=local.key(i)+ " : " + local.getItem(local.key(i));
					}
					alert(showTxt);

Storage事件监听。注意在google浏览器上在本页面修改数据不会触发storage事件，在其他页面修改时才会触发。

window.onload = function() {
				if (window.attachEvent) {
					window.attachEvent("storage", storageData);
				} else if (window.addEventListener) {
					window.addEventListener("storage", storageData, false);
				}
			}

			function onClick() {
				if (window.localStorage) { //localStorage
						localStorage.setItem("itmeA", "PageTwo")
				} else {
					alert("不支持 localStorage")
				}
			};

			function storageData(e) {
				var txt = document.getElementById("test_a");
				txt.text = e.toString();
			};

Web SQL Database

对于复杂数据结构的数据，我们还是需要数据库来存储数据。h5允许我们直接通过js的API在浏览器创建一个本地SQLITE数据库，支持标准SQL的的CRUD操作。

操作的基本步骤：

1.创建本地数据库。

2.开启事务，然后在事务中执行数据库操作。

openDatabase()

dataBase = openDatabase("demo.db", "1.0", "no", 1024 * 1024, function () { });

获取或者创建一个数据库，如果数据库不存在就创建。

需要传入的参数:

1.数据库名称

2.数据库版本号

3.对数据库描述

4.分配的数据库大小(单位:KB)

5回调函数(可省略)

transaction()

transaction(function());

开启事务，对于数据库的操作我们放在它的参数中处理。

executeSql()

executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

指定sql语句。dataHandler是调用成功的回调函数，通过该函数可以获取查询的结果集。errorHandler执行失败时调用的回调函数。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			var dataBase;
			window.onload = function() {
				dataBase = openDatabase("TestDB.db", "1.0", "MyDB", 1024 * 1024, function() {});
			}

			function operateSqlData() {
				dataBase.transaction(function(context) {
					context.executeSql('CREATE TABLE IF NOT EXISTS userTable (_iD unique primary key, uName)');
					context.executeSql('INSERT INTO userTable (_iD, uName) VALUES (2, "ZHAGN SAN")');
					context.executeSql('SELECT * FROM userTable', [], function(context, results) {
						var rowLen = results.rows.length;
						console.log('rowLen: ' + rowLen);
						for (var i = 0; i < rowLen; i++) {
							console.log('_iD: ' + results.rows.item(i)._iD);
							console.log('uName: ' + results.rows.item(i).uName);
						}
					});
				});
			}
		</script>
	</head>

	<body>
		<a οnclick="operateSqlData()">点击</a>
	</body>

</html>

蒲锦_up

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5本地存储

h5中提供了一种将键值对的数据保存在客户端的标准。跟cookie不同的是，它不会在每次请求服务器的时候上传至服务器(除非你自己实现该功能)，因为这是h5的规范得到了浏览器的很好支持，不需额外的插件之类，h5提供了更大容量的数据存储空间(h5的建议是每个网站提供5M的存储空间)，比cookie的4KB大太多。h5中提供了两种本地存储机制，一种是存储键值对数据的Web Storage，另外
复制链接

扫一扫

专栏目录