HTML5 的 localStorage（本地数据库） 的用法
判断浏览器是否支持localStorage可以使用下面的代码:
if(window.localStorage){
alert("支持localStorage")
}else{
alert("暂不支持localStorage")
}
//或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }
setItem存储value
用途：将value存储到key字段
用法：localStorage.setItem( key, value)
代码示例：
localStorage.setItem("id", "2");
getItem获取value
用途：获取指定key本地存储的值
用法：localStorage.getItem(key)
代码示例：
var value =localStorage.getItem("id");
removeItem删除key
用途：删除指定key本地存储的值
用法：localStorage.removeItem(key)
代码示例：
localStorage.removeItem("id");
clear清除所有的key/value
用途：清除所有的key/value
用法：localStorage.clear()
代码示例：
localStorage.clear();
localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：
var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i); var value = storage.getItem(key);
console.log(key + "=" + value);
}
storage事件
storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：
if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
} function handle_storage(e){
if(!e){
e=window.event;
}
}
storage事件对象的具体属性如下表：
| Property | Type | 描述 |
| key | String | 指定的键,添加、删除或moddified |
| oldValue | Any | (现在的前一个值覆盖),如果添加了一个新的项目或null |
| newValue | Any | 新值,或null如果一个项目是补充道 |
| url/uri | String | 页面称为引发这种变化的方法 |
下面是一些使用例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="../Script/jquery-1.9.1.min.js" type="text/javascript"></script> 5 <title>localStorage</title> 6 <script type="text/javascript"> 7 var productBrowseTheTraceArray = []; 8 if (window.localStorage) { 9 alert("浏览支持localStorage") 10 try { 11 if (typeof localStorage.getItem("productBrowseTheTraceJsonData") != 'undefined') { 12 productBrowseTheTraceArray = JSON.parse(localStorage.getItem("productBrowseTheTraceJsonData")) || []; 13 14 var time = new Date().toLocaleDateString().toString().replace("/", "-").replace("/", "-"); //判断 记录 是否过期 15 for (var i = 0;i< productBrowseTheTraceArray.length; i++) { //循环遍历 去除 过期的数据 16 if (daysBetween(time, productBrowseTheTraceArray[i].productAddDateTime) >15) { //判断 数据的日期是否 大于 15 17 productBrowseTheTraceArray.splice(i, 1); //记录过期 移除 18 } 19 } 20 } 21 localStorage.setItem("productBrowseTheTraceJsonData", JSON.stringify(productBrowseTheTraceArray)); 22 //browseTheTrace = localStorage.getItem("productBrowseTheTraceJsonData") || []; 23 } catch (e) { 24 Window.localStorage.clear(); //删除所有数据 25 localStorage.setItem("productBrowseTheTraceJsonData", JSON.stringify(productBrowseTheTraceArray)); 26 alert("异常名字：" + e.name); 27 alert("异常号：" + e.number); 28 alert("异常的描述信息：" + e.description); 29 alert("异常的错误信息：" + e.message); 30 } 31 } else { 32 alert("浏览暂不支持localStorage") 33 } 34 //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") } 35 36 $(function () { 37 38 39 //setItem存储value 40 $("#submit").click(function () { 41 var obj = 42 { 43 productId: $("#txtProductId").val(), 44 productName: $("#txtProductName").val(), 45 productPrice: $("#txtProductPrice").val(), 46 productImageUrl: $("#txtProductImageUrl").val(), 47 productAddDateTime: new Date().toLocaleDateString().toString().replace("/", "-").replace("/", "-") 48 }; 49 alert(obj); 50 for (var i = 0; i < productBrowseTheTraceArray.length; i++) { //循环遍历 是否 数组里面已经存在 该数据 51 if (productBrowseTheTraceArray[i].productId == obj.productId) { 52 productBrowseTheTraceArray.splice(i, 1); //记录过期 移除 53 break; 54 } 55 } 56 productBrowseTheTraceArray.push(obj); 57 var jsonData = JSON.stringify(productBrowseTheTraceArray); 58 alert(jsonData); 59 60 localStorage.setItem("productBrowseTheTraceJsonData", jsonData); 61 62 }); 63 64 $("#getData").click(function () { 65 productBrowseTheTraceArray = JSON.parse(localStorage.getItem("productBrowseTheTraceJsonData")) || []; 66 alert(productBrowseTheTraceArray); 67 var html = []; 68 for (var i = 0; i < productBrowseTheTraceArray.length; i++) { 69 html[i] = "<p>产品ID：" + productBrowseTheTraceArray[i].productId + "</p><br/><p>产品名称：" + productBrowseTheTraceArray[i].productName + "</p><br/><p>产品价格：" + productBrowseTheTraceArray[i].productPrice + "</p><br/><p>产品图片URL：" + productBrowseTheTraceArray[i].productImageUrl + "</p>"; 70 } 71 $("#data").html(html.join("")); 72 alert(html); 73 }); 74 75 }); 76 77 78 79 //+--------------------------------------------------- 80 //| 求两个时间的天数差 日期格式为 YYYY-MM-dd 81 //+--------------------------------------------------- 82 function daysBetween(DateOne, DateTwo) { 83 var OneMonth = DateOne.substring(5, DateOne.lastIndexOf('-')); 84 var OneDay = DateOne.substring(DateOne.length, DateOne.lastIndexOf('-') + 1); 85 var OneYear = DateOne.substring(0, DateOne.indexOf('-')); 86 87 var TwoMonth = DateTwo.substring(5, DateTwo.lastIndexOf('-')); 88 var TwoDay = DateTwo.substring(DateTwo.length, DateTwo.lastIndexOf('-') + 1); 89 var TwoYear = DateTwo.substring(0, DateTwo.indexOf('-')); 90 91 var cha = ((Date.parse(OneMonth + '/' + OneDay + '/' + OneYear) - Date.parse(TwoMonth + '/' + TwoDay + '/' + TwoYear)) / 86400000); 92 return Math.abs(cha); 93 } 94 </script> 95 </head> 96 <body> 97 Key:<input type="text" id="txtKey" /><br /> 98 产品Id：<input type="text" id="txtProductId" /><br /> 99 产品名称：<input type="text" id="txtProductName" /><br /> 100 产品价格：<input type="text" id="txtProductPrice" /><br /> 101 产品图片：<input type="text" id="txtProductImageUrl" /><br /> 102 <input type="button" id="submit" value="添加" /> 103 <input type="button" id="getData" value="获取localStorage的值" /> 104 <br /> 105 <div id="data"> 106 </div> 107 </body> 108 </html>
