html5本地存储

最新推荐文章于 2024-01-31 11:11:10 发布

ITDragon龙

最新推荐文章于 2024-01-31 11:11:10 发布

阅读量4.4k

点赞数 1

分类专栏： html5 前端技术文章标签： html 本地存储

本文链接：https://blog.csdn.net/qq_19558705/article/details/50493521

版权

前端技术同时被 2 个专栏收录

20 篇文章 13 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

html5本地存储

通过 localStorage /sessionStorage 对数据的简单存储

效果图：

1. localStorage ：
localStorage 没有时间限制的数据存储，也就是说，localStorage是永远不会过期的，除非主动删除数据。数据可跨越多个窗口，无视当前会话，在同一个域中被共同访问、使用。
2. sessionStorage ：
针对一个 session 的数据存储，任何一个页面存储的信息在窗口中同一域下的页面都可以访问它存储的数据。每个窗口的值都是独立的，它的数据会因窗口的关闭而丢失，不同窗口间的sessionStorage是不可以共享的。保存一些安全系数比较高或者是临时存储的数据

localStorage /sessionStorage都有相同的API ：
①localStorage.length 获得storage中的个数
②localStorage .key(n) 获得storage中第n个键值对的键
③localStorage.key = value
④localStorage.setItem(key, value) 添加
⑤localStorage.getItem(key)获取
⑥localStorage.removeItem(key) 移除
⑦localStorage.clear() 清除

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html5存储</title>
		<style>
			body{background: #4CDEB0;}
			form{line-height: 38px;width:300px;border-radius: 6px;padding: 30px;margin: 50px auto;background: rgba(255,255,255,0.2);}
			input{width:180px;height:27px;border-radius: 3px;border:1px solid #ABA9A9;font-size: 14px;padding-left: 6px;}
			input[type="checkbox"]{width: 15px;height: 15px;margin-left: 87px;}
		</style>
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script>
		<script>
			$(function(){
				var $remember = $("#remember");
				var $name = $("#username");
				var $password = $("#password");
				$remember.click(function(){
					if ( $remember.is(":checked") ) {
						localStorage.setItem("username",$name.val());
						localStorage.setItem("password",$password.val());
					} else {
						localStorage.removeItem("username");
						localStorage.removeItem("password");
						// 或者 localStorage.clear();
					}
				});
				if (localStorage.getItem("username") && localStorage.getItem("password")) {
					$name.val(localStorage.getItem("username"));
					$password.val(localStorage.getItem("password"));
					$remember.attr("checked", true);
				}
			});
		</script>
	</head>
	<body>
		<form>
			UserName : <input type="text" id="username" placeholder="Please enter name" autofocus="autofocus" required/><br />
			Password : <input type="password" id="password" placeholder="Please enter passwrd" required/><br />
			<label><input type="checkbox"  id="remember"/> Remember me</label>
		</form>
	</body>
</html>

本地存储之数据库

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Web SQL Database</title>
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script>
		<script>
		$(function(){
			var $database_test = $("#database_test");
			if (window.openDatabase) {
				// 创建数据库
				var dataBase = openDatabase("Blog", "1.0", "博客表" , 1024 * 1024, function () { });
				dataBase.transaction(function(ts){
					// 创建数据表
					ts.executeSql(
						"create table if not exists blog (id REAL UNIQUE, name TEXT)",
						[],
						function(ts,result){ console.log('创建blog表成功'); },
						function(ts, error){ console.log('创建blog表失败:' + error.message);}
					);
					// 保存数据
					ts.executeSql(
						"insert into blog (id, name) values(?, ?)",
						[1, 'ITDragon博客'],
						function(ts,result){ console.log('保存数据成功'); },
						function(ts, error){ console.log('保存数据失败:' + error.message);}
					);
					// 更新数据
					ts.executeSql(
						"update blog set name = ? where id= ?",
						["ITDragon", 0],
						function (ts, result) {console.log('更新数据成功'); },
						function (ts, error) {console.log('更新数据失败: ' + error.message);}
					);
					// 查询数据
					ts.executeSql(
						"select * from blog", 
						[],
						function (ts, result) {
							for (var i = 0 ; i < result.rows.length ; i ++) {
								$database_test.append("id : " + result.rows.item(i)["id"] + " name : " + result.rows.item(i)["name"] + "<br>");
							}
						},
						function (ts, error) {console.log('查询失败: ' + error.message);}
					);
					// 删除数据
					ts.executeSql(
						"delete from blog where id= ?",
						[0],
						function (tx, result) {console.log('删除数据成功');},
						function (tx, error) {console.log('删除失败: ' + error.message);}
					);
				});
				// 删除数据库
				dataBase.transaction(function (ts) {
					ts.executeSql('drop table blog');
				});
			}
		});
		</script>
	</head>
	<body>
		<span>数据查询显示：</span>
		<div id="database_test"></div>
		<article>
			<hgroup>
				<h2>html5本地存储之数据库</h2>
				<h3>三个核心方法</h3>
			</hgroup>
			<article>
				<p>①openDatabase：使用现有数据库或创建新数据库。</p>
				<p>②transaction：执行事务。</p>
				<p>③executeSql：执行SQL语句。</p>
			</article>
			<hgroup>
				<h3>参数详解</h3>
			</hgroup>
			<article>
				<p>openDatabase("Blog", "1.0", "博客表" , 1024 * 1024, function () { })</p>
				<p>1).数据库名称：Blog。</p>
				<p>2).版本号：1.0。</p>
				<p>3).数据库的描述：博客表。</p>
				<p>4).设置数据的大小：1024 * 1024。</p>
				<p>5).回调函数(可省略）：function () { }。</p>
			</article>
		</article>
	</body>
</html>

代码可直接使用

html5离线存储待更新

个人主页：http://www.itit123.cn/ 更多干货等你来拿

ITDragon龙

关注

1
点赞
踩
0

收藏

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

html5本地存储通过 localStorage /sessionStorage 对数据的简单存储本地存储之数据库html5离线存储待更新效果图：1. localStorage ：localStorage 没有时间限制的数据存储，也就是说，localStorage是永远不会过期的，除非主动删除数据。数据可跨越多个窗口，无视当前会话，在同一个域中被共同访问、使用。2. sessionStorage ：
复制链接

扫一扫

专栏目录