HTML5本地储存

最新推荐文章于 2022-02-26 14:45:31 发布

原创最新推荐文章于 2022-02-26 14:45:31 发布 · 588 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #本地储存 #localStorage #webSql #seeeionStorage

Javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

HTML5

1 篇文章

订阅专栏

本文介绍了HTML5中两种本地存储方式：localStorage和sessionStorage的基本用法，并提供了示例代码。同时，文章还深入探讨了WebSQL数据库API，包括如何创建数据库、执行SQL语句等操作。

在HTML5之前，本地储存通常用到就是cookies，就是存储空间太小，大约只有4kb。当然也有部分浏览器可以通过插件获得更大的存存空间，没有用过，不作讨论。随着网络发展，cookies已经满足不了现在的需求了。HTML5的本地储存应运而生。

一、　HTML5本地储存storage

1.localStorage 持久化本地储存，用户不主动删除会一直存在

2.sessionStorage 浏览器关闭，数据删除

方法：

setItem(key,value) 向本地存储一条数据

getItem(key) 通过键名获取本地相应数据

key(index) 通过索引获取本相应地数据

removeItem(key) 通过键名删除本地相应数据

clear() 删除本地所有数据

属性：

length 返回本地储存数据的条数

兼容性：

兼容性图片

目前主流浏览器大多都支持，亲测ie8不支持。

示例代码：

localStorage.setItem('a',"1");
localStorage.setItem('b',"2");
localStorage.setItem('c',"3");
console.log(localStorage.getItem("a"))   //1
console.log(localStorage.length);        //3
console.log(localStorage.key(1));        //b

二、HTML5 webSql数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs

方法：

openDatabase（dataName,version,description,size,callBack）打开已存在的数据库，如果不存在则会创建一个数据库

dataName 数据库名称

version 版本

description 描述

size 大小

callBack 回调函数(可选)

transaction(querySql,errorCallback,successCallback) 控制一个事务，以及基于这种情况执行提交或者回滚

querySql 包含事务内容的一个回调方法，其中可以执行sql语句（必选）

errorCallback 事务执行失败回调(可选)

successCallback 事务执行成功回调（可选）

executeSql(sqlStatement,arguments,errorCallback,successCallback) 执行sql语句，返回执行结果

sqlStatemen 可执行的sql语句(必选)

arguments 替代slq语句中的问号(可选)

errorCallback 事务执行失败回调(可选)

successCallback 事务执行成功回调（可选）

兼容性：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localstorage</title>
<script type="text/javascript">
window.onload=function(){
	var db=openDatabase("test","1.0","test DB",2*1024*1024);    //创建数据库
	db.transaction(function(q){
		q.executeSql("CREATE TABLE IF NOT EXISTS testTab(id,name,age)");    //创建表
		q.executeSql("INSERT INTO testTab(id,name,age) VALUES(?,?,?)",["1","赵子龙","29"]);  //插入数据
		q.executeSql("UPDATE testTab SET age='30' WHERE id =?",["1"]);   //修改数据
		q.executeSql("SELECT * FROM testTab",[],function(c,res){		// 读取数据				
			for(var i in res.rows){
				console.log(res.rows.item(i));
			}
		});
		q.executeSql("DELETE FROM testTab WHERE id=?",["1"]);           //删除数据
		q.executeSql("DROP TABLE testTab",[],function(){},function(a,b){console.log(b)});  //删除表
	});
}
</script>
</head>
<body>
	
</body>
</html>