当前位置：文档之家 › html5本地存储

html5本地存储

  • 格式：doc
  • 大小：22.79 KB
  • 文档页数：9

本地数据库Demo用到的技术Html5，JavaScript，Jquery应用环境：Chrome浏览器根据Html5提供的LocalDatabase API，在浏览器里面建立数据库，然后下载服务器数据，保存到本地，以便需要的时候直接从本地查询数据库。

详细使用方法：创建数据库：var db = openDatabase('myData','1.0','test database',1024*1024);openDatabase()方法含有四个参数，第一个参数为数据库名，第二个参数为版本号，第三个参数为数据库的描述，第四个参数为数据库的大小（1024*1024表示1M大小）执行SQL的主要方法是executeSql()db.transaction(function(tx){tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)', []);})查询方法：transaction.executeSql(SQLquery,[],dataHandler,errorHandler);第一个参数是要执行的SQL语句，如如果其中含有未知的参数，用？代替；第二个参数是SQL语句需要用到的参数，即取代第一个参数中的？；第三个参数是查询结果的处理函数；第四个是错误处理函数；数据库查询结果的数据集对象有一个rows属性，其中保存了查询到的每条记录，可以用for循环来一次取出里面的数据：for(var i = 0; i < rows.length; i++){var temp = rows.item(i);}操作实例代码：// JavaScript Documentvar db, edit_record = 0, errormsg = [];errormsg[0] = "Local Database error:";errormsg[1] = "Failed to open the local database. There may not be enough space left in this domain's quota";errormsg[2] = "Can't open a database. Get a Browser that supports HTML 5 like Googe Chrome";errormsg[3] = "Unable to get list of pages from your database"; errormsg[4] = "Unable to update record.";errormsg[5] = "Unable to create new record";errormsg[6] = "Unable to delete record";errormsg[7] = "Unable to delete all records in table";var number=1;var SQLtxt = [];var inetstatus = "OFFLINE";function check_inet() {inetstatus = navigator.onLine ? "ONLINE" : "OFFLINE";document.addEventListener("offline", function() {inetstatus = navigator.onLine ? "ONLINE" : "OFFLINE"}, false);document.addEventListener("online", function() {inetstatus = navigator.onLine ? "ONLINE" : "OFFLINE"}, false)}function Error_DB(a, b) {var c = errormsg[a] + "\nDetails:" + b.message;alert(c)}/*** 打开数据库***/function Open_DB(b, d, a, c) {try {if (window.openDatabase) {db = openDatabase(b, d, a, c);if (!db)Error_DB(1, null)} elseError_DB(2, null)} catch (e) {Error_DB(0, e)}}/*** 建表***/function build_db(SQL) {if (db)db.transaction(function(a) {a.executeSql(SQL)})}/*** SQL执行* 建表，插入数据* SQL**/function execSQL(SQL){db.transaction(function(a) {for(var i=1;i<=30000;i++){SQL = "insert into T_ICD10_New ( id , ZYBM , FJBM , JBMC , BM , LB ) values"+"( "+i+" , 'A00"+i+"' , 'A"+i+"' , '神经病神经病神经病"+i+"' , '天才"+i+"' , 5 )";a.executeSql(SQL, [], function() {$(".right").html("<i>"+(number++)+"/30000</i><br/><br/>") ;//var t = document.getElementById('right');//t.scrollTop = t.scrollHeight;}, function() {$(".right").append(".") ;//var t = document.getElementById('right');//t.scrollTop = t.scrollHeight;})}})}/*** 查询列表* SQL**/function selectSQL(SQL){db.transaction(function(a) {a.executeSql(SQL, [], function(b, a) {showlist(a)}, function() {$(".right").append("<i>Select failure</i><br/><br/>") ;})})}/*** 页面显示列表***/function showlist(c){$(".right > table > tbody").empty();for ( var b = 0; b < c.rows.length; ++b) {var a = c.rows.item(b);$(".right > table").append("<tr>"+"<td>"+a["id"]+"</td>"+"<td>"+a["ZYBM"]+"</td>"+"<td>"+a["FJBM"]+"</td>"+"<td>"+a["JBMC"]+"</td>"+"<td>"+a["BM"]+"</td>"+"<td>"+a["LB"]+"</td>"+"</tr>");}}function selectTree(id){var SQL="select id , fatherid , category , categoryname , endflag from t_icd_category wherefatherid = " + id;db.transaction(function(a) {a.executeSql(SQL, [], function(b, a) {showTree(a , id);}, function() {$(".right").append("<i>Select failure</i><br/><br/>") ;})})}function showTree(c , id){for ( var b = 0; b < c.rows.length; ++b) {var a = c.rows.item(b);var html="<div class='tree' id='"+a['id']+"'>";if(!a['endflag'])html+="<span class='plus open'>+</span><span class='showlist open'>";elsehtml+="<span class='showlist endflag'>";html+=a["categoryname"]+"</span></div>";$(".left").find("#"+id).append(html);}}/*** 查询总页数**/function getCount(pid , keywordZYBM ,keywordJBMC){var SQL="select count(id) as count from T_ICD10_New";if(pid != 0 && pid != ""){SQL += " WHERE LB =" + pid ;if(keywordZYBM) SQL += " AND ZYBM LIKE '%"+keywordZYBM+"%'";if(keywordJBMC) SQL += " AND JBMC LIKE '%"+keywordJBMC+"%'";}else if(keywordZYBM){SQL += " WHERE ZYBM LIKE '%"+keywordZYBM+"%'";if(keywordJBMC) SQL += " AND JBMC LIKE '%"+keywordJBMC+"%'";}else if(keywordJBMC) SQL += " WHERE JBMC LIKE '%"+keywordJBMC+"%'";db.transaction(function(a) {a.executeSql(SQL, [], function(b,k) {var c=k.rows.item(0);$("#countPage").html(Math.ceil(c['count']/25));})})}/*function adddata() {db.transaction(function(a) {a.executeSql(SQLtxt[8], [], function(c, a) {var b = a.rows.item(0);if (b["TotCnt"] < 1)adddata_step2();get_list()}, function(b, a) {Error_DB(3, a)})})}function adddata_step2() {db.transaction(function(b) {var a = [ "Walter Moore", "727.827.9035" ];b.executeSql(SQLtxt[3], a, function() {}, function(b, a) {Error_DB(0, a)});a = [ "Betty Smith", "727.967.1111" ];b.executeSql(SQLtxt[3], a, function() {}, function(b, a) {Error_DB(0, a)})})}function get_list() {db.transaction(function(a) {a.executeSql(SQLtxt[4], [], function(b, a) {loadlist(a)}, function(b, a) {Error_DB(3, a)})})}function loadlist(c) {var d = "";for ( var b = 0; b < c.rows.length; ++b) {var a = c.rows.item(b);d += "<br /><span style='cursor:pointer' onclick='return edit_contact(\""+ a["ContactId"]+ '","'+ a["ContactName"]+ '","'+ a["ContactPhone"]+ "\")'>Edit</span> / <span style='cursor:pointer' onclick='return delete_contact("+ a["ContactId"]+ ")'>Delete</span> -- Name: "+ a["ContactName"] + "-Phone: " + a["ContactPhone"]}}function delete_contact(a) {db.transaction(function(b) {b.executeSql(SQLtxt[6], [ a ], get_list(), function(b, a) {Error_DB(6, a)})})}function delete_alldata() {db.transaction(function(a) {a.executeSql(SQLtxt[7], [], get_list(), function(b, a) {Error_DB(7, a)})})}function store_local() {if (edit_record > 0) {var a = [ document.getElementById("ContactName").value,document.getElementById("ContactPhone").value, edit_record ];db.transaction(function(b) {b.executeSql(SQLtxt[5], a, Update_successful(), function(b, a) {Error_DB(4, a)})})} else {var a = [ document.getElementById("ContactName").value,document.getElementById("ContactPhone").value ];db.transaction(function(b) {b.executeSql(SQLtxt[3], a, Update_successful(), function(b, a) {Error_DB(5, a)})})}return false}function Update_successful() {document.getElementById("ContactName").value = "";document.getElementById("ContactPhone").value = "";edit_record = 0;get_list()}function edit_contact(c, b, a) {document.getElementById("ContactName").value = b;document.getElementById("ContactPhone").value = a;edit_record = c;return false}function show_demo() {document.getElementById("demo").style.display = "";document.getElementById("DemoDesc").style.display = "none" }function page_load() {check_inet();Open_DB("WMooreDB", "1.0", "WMooreDB", 5e6);build_db();adddata()}document.onload = page_load()*/。

合集下载

利用HTML5的本地存储实现图书馆网站的个性化

利用HTML5的本地存储实现图书馆网站的个性化

以 使 用其 它本 地 存 储技 术（ ￣ ｌ Ｃ ｏ ｏ ｋ ｉ ｅ 或Ｉ Ｅ 专 得 。 然后 ， 可 以 使 用 代码 ｓ ｅ ｔ Ｉ ｔ ｅ ｎ（ ｒ Ｕ ｒ ｌ ，
５参考文献
Ｓ ａ ｌ ｉ ｍ， 著． ＨＴ ＭＬ ５ 高 级程 序设计 【 Ｍ】 ． 李 杰， 柳靖， 刘淼 ， 译． 北京 ： 人 民 邮 电 出版 社， ２ ０ ｌ ｌ ， １ （ １ ７ ５ ） ． 可， 胡金 埔 ， 赵静 ， 译． 北京 ： 电子 工业 出 版社， ２ ０ ｌ ０ ， ｌ ２ （ １ ２ ８ ） ．
端 程序 使用。 置。 然 后 将 当前 页 面 的 ＵＲＬ 作为键值， 并将 值得一提的是， ＨＴＭＬ ５ 的本 地 存 储 并
可 以看到 ， 在 存 储 数 据 及 获 取 数 据 的 垂 直滚 动 条 的 位 置作 为 数 据 传 人ｓ ｅ ｔ Ｉ ｔ ｅ ｍ函 过程 中， 都是在前端进行 ， 并且 无论 用 户 离 数 进 行 存 储 。 当用 户再 次 访 问 当前 页 面时 ，
浏 览 器 记 住 当 前 的 阅读 位 置 ， 以 方 便 日后
用 户可 能 感 兴 趣 的 图 书 有 哪 些 。
要实现 网站 的个性 化， 关 键 是 如 何 存 再 次 继 续 阅读 ， 而 不 是 拖 动 垂 直 滚 动 条 寻 储 用 户 的 个性 化 信 息 。 幸运 的 是 ， 我 们 现 在
可 以 使 用 ＨＴＭＬ ５ 的 本地 存 储 来 将 信 息 以 键 值 对 的形 式 保 存在 本地 计 算 机 中 。 这样 ，
当 用 户 再 次 访 问 网站 时 ， 浏 览 器 会 在 需 要
时 将 信 息从 用 户 本地 计 算机 中取 出 来供 前 前 页 面 的 ｕＲＬ 及 当前 页 面 垂直 滚 动 条 的 位 序 合 理 的 利 用 存 储 空 间 。
前端常用的数据存储方式

前端常用的数据存储方式

前端常用的数据存储方式在前端开发中，数据的存储是一个非常重要的问题。

随着互联网技术的不断发展，前端应用的复杂度也越来越高，因此需要通过合适的数据存储方式来管理和处理数据。

本文将介绍前端常用的数据存储方式，包括本地存储、Cookie、Session Storage和IndexedDB。

一、本地存储本地存储是一种在浏览器本地存储数据的方法，它可以将数据存储在用户的计算机上，从而实现数据的持久化存储。

本地存储有两种主要的方式：LocalStorage和SessionStorage。

1. LocalStorageLocalStorage是一种HTML5提供的新型的数据存储方案，它可以将数据存储在用户的浏览器中，即使用户关闭了浏览器也不会丢失。

LocalStorage具有以下特点：- 存储容量大：LocalStorage的存储容量通常为5MB或更大，可以满足大部分前端应用的需求。

- 永久存储：LocalStorage中存储的数据是永久存储的，即使用户关闭了浏览器，数据也不会丢失。

- 基于域名的存储：每个域名都有独立的LocalStorage，不同域名之间的数据是隔离的。

2. SessionStorageSessionStorage也是HTML5提供的一种数据存储方式，它与LocalStorage的主要区别在于数据的生命周期。

SessionStorage具有以下特点：- 数据生命周期：SessionStorage中存储的数据只在当前会话中有效，会话结束后数据会被清除。

- 存储容量：SessionStorage的存储容量与LocalStorage相同，都可以达到5MB或更大。

- 同源策略限制：SessionStorage的数据只能被同一域名下的页面所访问。

二、CookieCookie是一种小型的文本文件，它存储在用户计算机中，由浏览器进行管理。

Cookie主要用于记录用户的一些信息，如登录状态、购物车数据等。

html5面试题答案解析

html5面试题答案解析

HTML5 废弃了一些过时的，不合理的HTML 标签：frameframesetnoframeappletbigcenterbasefront7、HTML5 标准提供了哪些新的API？HTML5 提供的应用程序 API 主要有：Media APIText Track APIApplication Cache APIUser InteractionData Transfer APICommand APIConstraint Validation APIHistory API8.Doctype作用?（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。

告知浏览器的解析器，用什么文档类型规范来解析这个文档。

9.行内元素有哪些？块级元素有哪些？空(void)元素有那些？（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（2）行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p（3）知名的空元素： <br> <hr> <img> <input> <link> <meta> 鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>10.CSS的盒子模型？（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了border 和 pading;（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).11.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？* 1.id选择器（ # myid）2.类选择器（.myclassname）3.标签选择器（div, h1, p）4.相邻选择器（h1 + p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（ * ）8.属性选择器（a[rel = "external"]）9.伪类选择器（a: hover, li: nth - child）* 可继承： font-size font-family color, UL LI DL DD DT;* 不可继承：border padding margin width height ;* 优先级就近原则，样式定义最近者为准;* 载入样式以最后载入的定位为准;优先级为:!important > id > class > tagimportant 比内联优先级高CSS3新增伪类举例：p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

HTML5本地存储——WebSQLDatabase

HTML5本地存储——WebSQLDatabase

HTML5本地存储——WebSQLDatabase在介绍了html5本地存储的Local Storage和Session Storage，这两个是以键值对存储的解决⽅案，存储少量数据结构很有⽤，但是对于⼤量结构化数据就⽆能为⼒了，灵活⼤不够强⼤。

我们经常在数据库中处理⼤量结构化数据，html5引⼊Web SQL Database概念，它使⽤ SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范中使⽤的⽅⾔是SQLlite，悲剧正是产⽣于此，有着这样的声明This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.⼤概意思就是这个⽂档曾经在W3C推荐规范上，但规范⼯作已经停⽌了。

⽬前已经陷⼊了⼀个僵局：⽬前的所有实现都是基于同⼀个SQL后端（SQLite），但是我们需要更多的独⽴实现来完成标准化。

也就是说这是⼀个废弃的标准了，虽然部分浏览器已经实现，但。

三个核⼼⽅法但是我们学⼀下也没什么坏处，⽽且能和现在W3C⼒推的IndexedDB做⽐较，看看为什么要废弃这种⽅案。

Web SQL Database 规范中定义的三个核⼼⽅法：1. openDatabase：这个⽅法使⽤现有数据库或新建数据库来创建数据库对象2. transaction：这个⽅法允许我们根据情况控制事务提交或回滚3. executeSql：这个⽅法⽤于执⾏SQL 查询我们可以使⽤这样简单的⼀条语句，创建或打开⼀个本地的数据库对象var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);openDatabase接收五个参数：1. 数据库名字2. 数据库版本号3. 显⽰名字4. 数据库保存数据的⼤⼩（以字节为单位 )5. 回调函数（⾮必须)如果提供了回调函数，回调函数⽤以调⽤ changeVersion() 函数，不管给定什么样的版本号，回调函数将把数据库的版本号设置为空。