html5内置了2种本地数据库，一是被称为“SQLLite”,可以通过SQL语言来访问文件型SQL数据库。二是被称为“indexedDB” 的NoSQL类型的数据库，本篇主要讲indexedDB数据库。

　该数据库是一种存储在客户端本地的NoSQL数据库，目前chrome11以上、Firefox4以上、Opera18以上、Safar8以上及IE10以上的浏览器提供支持

一、连接数据库

使用indexedDB.open方法连接数据库

var dbName = 'indexedDBTest';      //数据库名

var dbVersion = 20170603;            //版本号

/*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/

var dbConnect = indexedDB.open(dbName, dbVersion);

open方法返回一个IDBOpenDBRequest对象，代表数据库连接的请求对象；该方法接收2个参数

第一个参数：字符串，代表数据库名

第二个参数：无符号长整形数值，代表版本号

示例代码如下

 <script>

     //在浏览器中都能运行的统一定义

     //首先需要对indexedDB数据库，及该数据库所使用的事务、IDBKeyRange对象与游标对象进行预定义

     window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

     window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;

     function connectDatabase() {

     //数据库名

     var dbName = 'indexedDBTest';

     //版本号

     var dbVersion = 20170603;

     var idb;

     /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/

     var dbConnect = indexedDB.open(dbName, dbVersion);

     //连接成功时所执行的事件处理函数

     dbConnect.onsuccess = function(e) {

         //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象

         idb = e.target.result;

         alert('数据库连接成功');

     };

     //连接失败是要处理得事件

     dbConnect.onerror = function() {

         alert('数据库连接失败');

     };

     }

 </script>

 <input type="button" value="连接数据库" onclick="connectDatabase();" />

二、数据库的版本更新

　　成功连接数据库后，还应该创建相当于关系型数据库中的数据表的对象仓库（object store）与用于检索数据的索引（index）。

　　在使用indexexDB数据库时，所有对于数据的操作都在一个事务内部执行。

　　事务分为3种：只读事务、读写事务、与版本更新事务，这里主要展示版本更新事务

　 使用onupgradeneeded事件来监听数据库连接的请求对象

示例代码如下

 <head>

     <meta charset="UTF-8"/>

     <title>更新数据库的版本</title>

     <script>

         window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

         window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

         window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;

         function VersionUpdate() {

         var dbName = 'indexedDBTest'; //数据库名

         var dbVersion = 20170304; //版本号

         var idb;

         /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/

         var dbConnect = indexedDB.open(dbName, dbVersion);

             dbConnect.onsuccess = function(e) { //连接成功

                 //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象

             idb = e.target.result;

             alert('数据库连接成功');

              };

         dbConnect.onerror = function() {

             alert('数据库连接失败');

         };

         dbConnect.onupgradeneeded = function(e) {

             //数据库版本更新

             //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象

             idb = e.target.result;

             /*e.target.transaction属性值为一个IDBTransaction事务对象，此处代表版本更新事务*/

             var tx = e.target.transaction;

             //更新前的版本号

             var oldVersion = e.oldVersion;

             //更新前的版本号

             var newVersion = e.newVersion;

             alert('数据库版本更新成功,旧的版本号为' + oldVersion + ',新的版本号为' + newVersion);

             /*

              * 此处可执行创建对象仓库等处理

              */

         };

         }

     </script>

 </head>

 <body>

     <input type="button" value="数据库版本更新" onclick="VersionUpdate();" />

 </body>

三、创建对象仓库

　　在indexexDb中，不能重复创建同名的对象仓库，否则会报错

　　在数据库的版本更新事务中，通过createObjectStore来创建对象，

var name = 'Users';

var optionalParameters = {

    keyPath: 'userId',

    autoIncrement: false

};

var store = idb.createObjectStore(name, optionalParameters);

该方法返回一个IDBObjectStore对象，该对象代表被创建成功的对象仓库。该对象接收2个参数，

第一个参数： 字符串，代表对象仓库名；

第二个参数：可选参数，参数值为一个js对象，该对象的keyPath属性值用于指定对象仓库中该记录每一条记录使用哪个属性值来作为该记录的主键值。相关方法说明

 keyPath：值用于指定每一条记录使用哪个属性值作为该记录的主键值，默认值为null。对象仓库中的每一条记录均为具有一个或者多个属性值的一个对象

 autoIncrement：布尔值。当值为true的时候，将主键指定为自增主键。当值为false的时候，则必须在添加数据记录时显示地指定主键值

示例代码如下

 <head>

     <meta charset="UTF-8"/>

     <title>创建对象仓库</title>

     <script>

     window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

     window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;

     function CreateObjectStore() {

         var dbName = 'indexedDBTest'; //数据库名

         var dbVersion = 20150305; //版本号

         var idb;

         /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/

         var dbConnect = indexedDB.open(dbName, dbVersion);

         dbConnect.onsuccess = function(e) { //连接成功

         //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象

         idb = e.target.result;

         alert('数据库连接成功');

         };

         dbConnect.onerror = function() {

         alert('数据库连接失败');

         };

         dbConnect.onupgradeneeded = function(e) {

         //数据库版本更新

         //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象

         idb = e.target.result;

         /*e.target.transaction属性值为一个IDBTransaction事务对象，此处代表版本更新事务*/

         var tx = e.target.transaction;

         var name = 'Users';

         var optionalParameters = {

             keyPath: 'userId',

             autoIncrement: false

         };

         var store = idb.createObjectStore(name, optionalParameters);

         alert('对象仓库创建成功');

         /*

          * 索引创建部分略，稍后详述

          */

         };

     }

     </script>

 </head>

 <body>

     <input type="button" value="创建对象仓库" onclick="CreateObjectStore();" />

 </body>

四、创建索引

　　在关系型数据库中，可以针对非索引字段进行检索。而在indexexDB中，只能针对被设为索引的属性值进行检索，不能针对没有被设为索引的属性值进行检索

　　在数据库的版本更新事务中，在对象仓库创建成功后调用对象仓库的createIndex方法创建索引

var name = 'userNameIndex';

var keyPath = 'userName';

var optionalParameters = {

    unique: false,

    multiEntry: false

};

var idx = store.createIndex(name, keyPath, optionalParameters)

　　该方法接收3个参数，

第一个参数：字符串，代表索引名；

第二个参数：数据库仓库中记录对象的哪个属性来创建索引（索引名与属性名可以相同的）；

第三个参数：可选参数，参数值为js对象

示例代码如下

 <head>

     <meta charset="UTF-8" />

     <title>创建索引</title>

     <script>

     window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

     window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;

     function CreateIndex() {

         var dbName = 'indexedDBTest'; //数据库名

         var dbVersion = 20150306; //版本号

         var idb;

         /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/

         var dbConnect = indexedDB.open(dbName, dbVersion);

         dbConnect.onsuccess = function(e) { //连接成功

             //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象

             idb = e.target.result;

             alert('数据库连接成功');

         };

         dbConnect.onerror = function() {

             alert('数据库连接失败');

         };

         dbConnect.onupgradeneeded = function(e) {

             //数据库版本更新

             //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象

                     idb = e.target.result;

             /*e.target.transaction属性值为一个IDBTransaction事务对象，此处代表版本更新事务*/

             var tx = e.target.transaction;

             var name = 'newUsers';

             var optionalParameters = {

                 keyPath: 'userId',

                 autoIncrement: false

             };

             var store = idb.createObjectStore(name, optionalParameters);

             alert('对象仓库创建成功');

             var name = 'userNameIndex';

             var keyPath = 'userName';

             var optionalParameters = {

                 unique: false,

                 multiEntry: false

             };

             var idx = store.createIndex(name, keyPath,optionalParameters);

             alert('索引创建成功');

         };

     }

 </script>

 </head>

 <body>

     <input type="button" value="创建索引" onclick="CreateIndex();" />

 </body>

五、使用事务

　　数据库链接后，可以使用如下方法开启只读事务与读写事务

　　在indexedDB中，使用某个已建立连接的的数据库对象的transaction方法开启事务

 //事务名称1

 var storeNames = ['Users'];

 //只读事务

 var mode = "readonly";

 //读写事务

 //var mode = "readwrite";

 //idb为某个已连接数据库，开启事务

 var tx  = idb.transaction(storeNames , mode)

 //事务结束时所要执行的处理

 tx.oncomplete = function(e){

 }

 //事务中止时所要执行的处理

 tx.onabort = function(e){

 }

 /*

  事务中的处理内容

  * */

 //中止事务

 tx.abort()

该方法有2个参数，

第一个参数：可以为由一些对象仓库名组成的一个字符串数组，用于定义事务的作用范围

第二个参数：为可选参数，用于定义事务的读写模式

6、保存数据

　　为了保存数据，首先连接某个indexedDB数据库，并且连接后使用该数据库的transaction方法开启一个读写事务，然后获取该事务对象，使用该对象仓库的put方法进行保存数据

示例代码

 <head>

     <title>向indexedDB数据库的对象仓库中保存数据</title>

     <script>

         window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

         window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

         window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;

         function SaveData() {

             var dbName = 'indexedDBTest'; //数据库名

             var dbVersion = 20150306; //版本号

             var idb;

             /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/

             var dbConnect = indexedDB.open(dbName, dbVersion);

             dbConnect.onsuccess = function(e) { //连接成功

                 idb = e.target.result; //引用IDBDatabase对象

                 var tx = idb.transaction(['Users'], "readwrite"); //开启事务

                 var store = tx.objectStore('Users');

                 console.log(store); //-> {IDBObjectStore}

                 var value = {

                     userId: 1,

                     userName: '张三',

                     address: '住址1'

                 };

                 //保存数据

                 var req = store.put(value);

                 req.onsuccess = function(e) {

                     alert("数据保存成功");

                 };

                 req.onerror = function(e) {

                     alert("数据保存失败");

                 };

             };

             dbConnect.onerror = function() {

                 alert('数据库连接失败');

             };

         }

     </script>

 </head>

 <body>

     <input type="button" value="保存数据" onclick="SaveData();" />

 </body>

7、获取数据

　　可以使用对象仓库的get方法从对象仓库中获取一条数据

var req = store.get(1)

示例源码

 <head>

     <title>从indexedDB数据库的对象仓库中获取数据</title>

     <meta charset="UTF-8"/>

     <script>

         window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

         window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

         window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;

         function GetData() {

             var dbName = 'indexedDBTest'; //数据库名

             var dbVersion = 20150306; //版本号

             var idb;

             /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/

             var dbConnect = indexedDB.open(dbName, dbVersion);

             dbConnect.onsuccess = function(e) { //连接成功

                 idb = e.target.result; //引用IDBDatabase对象

                 var tx = idb.transaction(['Users'], "readonly");

                 var store = tx.objectStore('Users');

                 var req = store.get(1);

                 req.onsuccess = function() {

                     if(this.result == undefined) {

                         alert("没有符合条件的数据");

                     } else {

                         alert("获取数据成功,用户名为" + this.result.userName);

                     }

                 }

                 req.onerror = function() {

                     alert("获取数据失败");

                 }

             };

             dbConnect.onerror = function() {

                 alert('数据库连接失败');

             };

         }

     </script>

 </head>

 <body>

     <input type="button" value="获取数据" onclick="GetData();" />

 </body>

8、根据主键值检索数据

　　get方法只能获取到一条数据，要获取一批数据的时候，就需要使用indexedDB中的游标

　　通过对象仓库的openCursor方法创建并打开一个游标

var range = IDBKeyRange.bound(1,4);
var direction = "next";

var req = store.openCursor(range,direction);

该方法返回一个IDBRequest对象，代表一个向数据库发出检索数据的请求。该方法有两个参数

第一个参数：IDBKeyRange对象，对象的创建方法有bound(),only(),lowerBound(),upperBound(); 对应4个方法的详解如下

 bound方法使用示例

 var range = IDBKeyRange.bound(lower,upper,lowerOpen,upperOpen);

 该方法返回一批数据，由主键值组成的IDBKeyRange集合对象。该方法有4个参数：

 第一个参数：整数值，代表IDBKeyRange集合中的最小主键值

 第二个参数：整数值，代表IDBKeyRange集合中的最大主键值

 第三个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第一个参数中指定的最小主键值；当值为true时，代表该集合对象中排除最小主键值

 第四个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第二个参数中指定的最大主键值；当值为true时，代表该集合对象中排除最大主键值

 only方法使用示例

 var range = IDBKeyRange.only(value);

 该方法返回一条数据，该方法有一个参数，整数值，代表该数据的主键值

 lowerBound方法使用示例

 var range = IDBKeyRange.lowerBound(lower,lowerOpen);

 该方法返回一批数据。返回的所有数据的主键值均大于等于第一个参数。该方法有两个参数

 第一个参数：整数值，代表该集合中的最小主键值

 第二个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第一个参数指定的最小主键值；当值为true时，代表该集合对象中排除最小主键值

 upperBound方法使用示例

 var range = IDBKeyRange.lowerBound(upper,upperOpen);

 该方法返回一批数据，返回的所有数据的主键值均小于等于第一个参数。该方法有两个参数

 第一个参数：整数值，代表该集合中的最小主键值

 第二个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第一个参数指定的最大主键值；当值为true时，代表该集合对象中排除最大主键值

第二个参数：用于指定游标的读取方向，参数值有如下定义

next：数据按主键值升序排列，主键值相等的数据均被读取到游标中

nextunique：数据按主键值升序排列，主键值相等的数据只读取第一条数据

prev：数据按主键值降序排列，主键值相等的数据均被读取到游标中

prevunique:数据按主键值降序排列，主键值相等的数据只读取第一条数据

示例代码

 <head>

 <title>根据数据记录的主键值检索数据</title>

 <meta charset="UTF-8" />

 <script>

     window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

     window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;

     var dbName = 'indexedDBTest'; //数据库名

     var dbVersion = 20150306; //版本号

     var idb;

     function window_onload() {

         document.getElementById("btnSaveData").disabled = true;

         document.getElementById("btnSearchData").disabled = true;

     }

     function ConnectDataBase() {

         /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/

         var dbConnect = indexedDB.open(dbName, dbVersion);

         dbConnect.onsuccess = function(e) { //连接成功

             idb = e.target.result; //引用IDBDatabase对象

             alert('数据库连接成功');

             document.getElementById("btnSaveData").disabled = false;

         };

         dbConnect.onerror = function() {

             alert('数据库连接失败');

         };

     }

     function SaveData() {

         var tx = idb.transaction(['Users'], "readwrite"); //开启事务

         tx.oncomplete = function() {

             alert('保存数据成功');

             document.getElementById("btnSearchData").disabled = false;

         }

         tx.onabort = function() {

             alert('保存数据失败');

         }

         var store = tx.objectStore('Users');

         var value = {

             userId: 1,

             userName: '张三',

             address: '住址1'

         };

         store.put(value);

         var value = {

             userId: 2,

             userName: '李四',

             address: '住址2'

         };

         store.put(value);

         value = {

             userId: 3,

             userName: '王五',

             address: '住址3'

         };

         store.put(value);

              value = {

             userId: 4,

             userName: '赵六',

             address: '住址4'

         };

         store.put(value);

     }

     function SearchData() {

         var tx = idb.transaction(['Users'], "readonly");

         var store = tx.objectStore('Users');

         var range = IDBKeyRange.bound(1, 4);

         var direction = "next";

         var req = store.openCursor(range, direction);

         req.onsuccess = function() {

             var cursor = this.result;

             if(cursor) {

                   alert('检索到一条数据，用户名为' + cursor.value.userName);

                 cursor.continue(); //继续检索

             } else {

                 alert('检索结束');

             }

         }

         req.onerror = function() {

             alert('检索数据失败');

         }

     }

 </script>

 </head>

 <body onload="window_onload()">

     <input id="btnConnectDataBase" type="button" value="连接数据库" onclick="ConnectDataBase();" />

     <input id="btnSaveData" type="button" value="保存数据" onclick="SaveData();" />

     <input id="btnSearchData" type="button" value="检索数据" onclick="SearchData();" />

 </body>

9、根据索引属性值检索数据

使用openCursor方法进行检索，使用方式与openCursor方法相相似

10统计对象仓库中的数据数量

使用count方法

11、综合实例：使用indexedDB API制作web留言本

代码示例

 <script type="text/javascript">

 window.indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB ||window.msIndexedDB;

 window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;

 window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange ||window.msIDBKeyRange;

 window.IDBCursor = window.IDBCursor || window.webkitIDBCursor ||window.msIDBCursor;

 var dbName = 'MyData'; //数据库名

 var dbVersion = 20150311; //版本号

 var idb, datatable;

 function init() {

     var dbConnect = indexedDB.open(dbName, dbVersion); //连接数据库

     dbConnect.onsuccess = function(e) { //连接成功

         idb = e.target.result; //获取数据库

         datatable = document.getElementById("datatable");

     };

     dbConnect.onerror = function() {

         alert('数据库连接失败');

     };

     dbConnect.onupgradeneeded = function(e) {

         idb = e.target.result;

         if(!idb.objectStoreNames.contains('MsgData')) {

             var tx = e.target.transaction;

             tx.onabort = function(e) {

                 alert('对象仓库创建失败');

             };

             var name = 'MsgData';

             var optionalParameters = {

                 keyPath: 'id',

                 autoIncrement: true

             };

             var store = idb.createObjectStore(name, optionalParameters);

             alert('对象仓库创建成功');

         }

     };

 }

 function removeAllData() {

     for(var i = datatable.childNodes.length - 1; i >= 0; i--) {

         datatable.removeChild(datatable.childNodes[i]);

     }

     var tr = document.createElement('tr');

     var c = "";

     c += "<tr>";

     c += "<td>姓名</td>";

     c += "<td>留言</td>";

     c += "<td>留言时间</td>";

     c += "</tr>";

     tr.innerHTML = c

     datatable.appendChild(tr)

 }

 function showData(dataObject) {

     var tr = document.createElement('tr');

     var t = new Date();

     t.setTime(row.time);

     var c = "";

     c += "<td>"+  row.name +"</td>";

     c += "<td>"+  row.message +"</td>";

     c += "<td>"+  t.toLocaleDateString() + " " + t.toLocaleTimeString(); +"</td>";

     tr.innerHTML = c

     datatable.appendChild(tr);

 }

 function showAllData() {

     removeAllData();

     var tx = idb.transaction(['MsgData'], "readonly"); //开启事务

     var store = tx.objectStore('MsgData');

     var range = IDBKeyRange.lowerBound(1);

     var direction = "next";

     var req = store.openCursor(range, direction);

     req.onsuccess = function() {

         var cursor = this.result;

         if(cursor) {

             showData(cursor.value);

             cursor.continue(); //继续检索

         }

     }

 }

 function addData(name, message, time) {

     var tx = idb.transaction(['MsgData'], "readwrite"); //开启事务

     tx.oncomplete = function() {

         alert('保存数据成功');

     }

     tx.onabort = function() {

         alert('保存数据失败');

     }

     var store = tx.objectStore('MsgData');

     var value = {

         name: name,

         memo: message,

         time: time

     };

     store.put(value);

 }

 function saveData() {

     var name = document.getElementById('name').value;

     var memo = document.getElementById('memo').value;

     var time = new Date().getTime();

     addData(name, memo, time);

     showAllData();

 }

 </script>

 <body onload="init();">

 <h1>使用indexedDB API制作Web留言本</h1>

 <table>

     <tr>

     <td>姓名:</td>

     <td><input type="text" id="name"></td>

     </tr>

     <tr>

     <td>留言:</td>

     <td><input type="text" id="memo"></td>

     </tr>

     <tr>

     <td></td>

     <td><input type="button" value="保存" onclick="saveData();"></td>

     </tr>

 </table>

 <hr>

 <table id="datatable" border="1"></table>

 <p id="msg"></p>

 </body>

html5本地存储（三）--- 本地数据库 indexedDB的更多相关文章

  1. HTML5本地存储之本地数据库篇

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. iOS 图片本地存储、本地获取、本地删除

    在iOS开发中.经常用到图片的本地化. iOS 图片本地存储.本地获取.本地删除,可以通过以下类方法实现. p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: ...

  3. HTML5系列三（多媒体播放、本地存储、本地数据库、离线应用）

    各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video&g ...

  4. Html5 学习系列（六）Html5本地存储和本地数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

  5. Html5本地存储和本地数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

  6. HTML5本地存储和本地的数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

  7. HTML5离线存储和本地缓存

    一.离线存储 有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来 1.在index.html里加上<html manifest=" ...

  8. HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket

    web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...

  9. HTML5 学习总结（三）——本地存储（localStorage、sessionStorage、WebSqlDataBase、IndexedDB）

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  10. HTML5 学习总结（三）——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

随机推荐

  1. 使用jmeter做接口测试----柠檬不萌！

    一.乱码解决方案 1.jmeter查看结果树乱码 (1)在jmeter的bin目录下找到jmeter.properties这个文件,添加上 sampleresult.default.encoding= ...

  2. HTML5网页如何让所有的浏览器都能识别语义元素标签样式

    浏览器对语义元素的支持情况 如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未 ...

  3. App加载主要流程

    主要流程 Application OnCreate 加载第三方的sdk 加载自身的逻辑 发送远程数据请求 xxx.json 渲染界面 List

  4. LeetCode Array Easy 66. Plus One

    Description Given a non-empty array of digits representing a non-negative integer, plus one to the i ...

  5. 安装APK到android设备那些事儿

    APK是AndroidPackage的缩写,即Android系统的应用软件安装包(apk).APK是类似Symbian Sis或Sisx的文件格式.通过将APK文件直接传到Android模拟器或And ...

  6. 无法启动此程序 ，因为计算机中丢失MSVCP120.dll

    1.文件丢失问题 无法启动此程序 ,因为计算机中丢失MSVCP120.dll 具体如下图所示: 等dll文件丢失,可以去下载 DirectX修复工具去修复即可 http://www.pc6.com/s ...

  7. JAVA练习01

    public class b2 { public static void main(String args[]) { int a[] = {9,1,2,3,5,0,7,8,4,6}; int max, ...

  8. 深入浅出 Vue.js 第九章 解析器---学习笔记

    本文结合 Vue 源码进行学习 学习时,根据 github 上 Vue 项目的 package.json 文件,可知版本为 2.6.10 解析器 一.解析器的作用 解析器的作用就是将模版解析成 AST ...

  9. JavaWeb开发中遇到的错误:org.apache.catalina.core.StandardWrapperValve invoke

    org.apache.catalina.core.StandardWrapperValve invoke 今天写代码,竟然接连遇到这个异常好几次.debug几个小时才弄明白,晕. 上网找了些拼凑下做个 ...

  10. git+可视化工具+github/码云

    git (实际上git和TortoiseGIT是一回事,只是TortoiseGIT把git命令行功能做了一个可视化处理,所以下面git和TortoiseGIT实现功能是一样的) 1.如何使用Git上传 ...