本地存储技术由来已久，使用它一是可以减少向服务器的请求次数，从而减少用户等待从服务端获取数据的时间；二是网络状态不佳时仍可以显示离线数据。
简介：localStorage类似于Cookie，用于持久化本地存储，但它没有时间限制，除非主动删除和清空内容，否则数据永不过期。另外它的存储能力也远大于Cookie，可以存储多达5MB的数据。 语法：
保存数据：setItem(key, value) 等三种方式 if(！window.localStorage){ alert("浏览器不支持localstorage"); return false; }else{ var storage=window.localStorage; //写入a字段 storage["a"]=1; //写入b字段 storage.b=1; //写入c字段 storage.setItem("c",3); }1
读取数据：getItem(“key”) 等三种方式 //第一种方法读取 var a=storage.a; //第二种方法读取 var b=storage["b"]; //第三种方法读取 var c=storage.getItem("c"); 删除数据：removeItem(“key”)清除所有：clear()检索数据：key(n)，检索第n个键的值检查浏览器是否支持：window.localStorage简介：sessionStorage类似于Session，用于本地存储一个会话（session）中的数据。这些数据只有在同一个会话中的页面才能访问，当会话结束后（关掉网站所有浏览的页面或浏览器），数据随之也会丢失。因此sessionStorage是一种不可持久化的本地存储。 语法：与 LocalStorage 相同
简介：HTML5引入Web SQL数据库概念，它使用SQL来操纵客户端数据库的API，这些API是异步的，规范中使用的是SQLlite。SQLite是一款轻型的数据库，是遵循ACID（原子性、一致性、隔离性、持久性）的关系型数据库管理系统。它的设计目标是嵌入式的，它占用资源非常低，只需要几百K字节的内存就可以了，另外它的处理速度很快。 语法：
检测是否支持：if(window.openDatabase){…}创建或打开数据库：var db=window.openDatabase(name,version,displayName,estimatedSize,creationCallback) name是数据库名称字符串 version是数据库版本号字符串 displayName是数据库显示名称字符串 esitimatedSize是数据库保存数据的大小，（以字节为单位） creationCallback是创建或连接数据库成功后的回调函数。执行后可以通过db对象检测创建或连接数据库是否成功。 例：var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);执行SQL语句： database.transaction() db.transaction(function(tx){ tx.executeSql( sqlString, paramArray, successCallback, failedCallback); }); sqlString：需要执行的SQL语句字符串paramArray：需要传递的参数数组，没有参数时用 ‘[]’ 代替successCallback：成功的回调函数，一般用于查询结果集failedCallback：出现错误的回调函数 完整实例： var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function (tx) { //创建LOGS表，表头为id、log tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); //在LOGS表中插入数据 tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")'); msg = '<p>数据表已创建，且插入了两条数据。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { //查询信息 tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { //数据库记录的数量 var len = results.rows.length; msg = "<p>查询记录条数: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; //显示每条数据的log信息 for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.querySelector('#status').innerHTML += msg; } }, null); });简介：IndexedDB是一种轻量级NoSQL（Not Only SQL）数据库，NoSQL数据库是非关系性的数据库，它不需要使用SQL语句去操作数据库，数据的形式采用JSON格式，提供了常规的CRUD（增查改删）操作，并支持事务，所有操作都是异步的，储存空间也比较大。
检测是否支持：if(window.indexedDB) {…}数据库初始化：var req=indexedDB.open(name,version) name是数据库名称字符串 version是数据库版本号字符串如果指定的数据库存在，则打开，否则创建数据库。 每一次IndexedDB数据库操作，都需要定义操作在成功或失败的回调函数： if(window.indexedDB) { var req = indexedDB.open(name, version); var db; req.onsuccess = function(event) { db = event.target.result;}; req.onerror = function(error) { console.log(err.target.errorCode);}; req.onupgradeneeded = function(event) { db = event.target.result;}; } 对象存储空间:var store = db.createObjectStore(name,optionalParameters) name是对象存储空间名字符串 optionalParameters参数可选，代表对象存储空间中键值的选项，是个JSON对象配置。 我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键（keyGenerator），也可以不指定。 req.onupgradeneeded = function(event) { db=event.target.result; //判断对象存储空间是否存在，没有就创建 if(!db.objectStoreNames.contains("test")){ //创建对象存储空间，键值是属性No db.createObjectStore("test",{keyPath:"No"}); } }; 索引：需要使用其他属性（非主键）获取数据时，就要预先创建索引，然后使用索引获取数据 store.createIndex(name,keyPath,optionalParameters) name是索引名字符串 keyPath是要创建索引的对象属性字符串 optioanlParameters是设置索引是否唯一的JSON对象，一般都设置为｛unique:true}事务：IndexedDB数据库中常用的对数据库的操作（例如插入、删除、更改数据）都需要在事务里完成 创建事物的语法：var trans=db.transaction(storeName,mode) storeName是要操作对象存储空间名字符串 mode事物模式字符串：“readonly”和“readwrite”两种，默认为只读 var trans=db.transaction("test","readwrite"); trans.onerror=function(){…}; trans.onabort=function(){…}; trans.oncomplete=function(){…}; CRUD操作：cread、retrieve、update、delete 增删查改操作 //获取相应的对象存储空间 var store = db.transaction("test", "readwrite").objectStore("test"); //增加数据，data是JSON对象 store.add(data); //读取数据,keyPath是键值 store.get(keyPath).onsuccess=function(){ //更新数据,data是新的JSON对象 store.put(newdata);}; //删除数据,keyPath是键值 store.delete(keyPath);https://www.runoob.com/jsref/prop-win-localstorage.html ↩︎
