html5本地存储

蔚落 2022-08-19 11:09 212阅读 0赞

# html5本地存储 #

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

效果图：

![Center][]

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离线存储待更新

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

[Center]: /images/20220731/da3764fdc8ab4e7ab1cf2a1e5d32ce34.png
[Link 1]: http://blog.csdn.net/qq_19558705/article/details/51993884
[http_www.itit123.cn]: http://www.itit123.cn/