html5本地存储

来源：互联网发布：公务员网络培训学院编辑：程序博客网时间：2024/06/02 18:20

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/ 更多干货等你来拿

1 0