判断浏览器是否支持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 页面称为引发这种变化的方法

下面是一些使用例子：

 <!DOCTYPE html>

 <html>

 <head>

     <script src="../Script/jquery-1.9.1.min.js" type="text/javascript"></script>

     <title>localStorage</title>

     <script type="text/javascript">

         var productBrowseTheTraceArray = [];

         if (window.localStorage) {

             alert("浏览支持localStorage")

             try {

                 if (typeof localStorage.getItem("productBrowseTheTraceJsonData") != 'undefined') {

                     productBrowseTheTraceArray = JSON.parse(localStorage.getItem("productBrowseTheTraceJsonData")) || [];

                     var time = new Date().toLocaleDateString().toString().replace("/", "-").replace("/", "-");  //判断 记录 是否过期

                     for (var i = 0;i< productBrowseTheTraceArray.length; i++) {   //循环遍历 去除 过期的数据

                         if (daysBetween(time, productBrowseTheTraceArray[i].productAddDateTime) >15) {  //判断 数据的日期是否 大于 15

                             productBrowseTheTraceArray.splice(i, 1);  //记录过期  移除

                         }

                     }

                 }

                 localStorage.setItem("productBrowseTheTraceJsonData", JSON.stringify(productBrowseTheTraceArray));

                 //browseTheTrace = localStorage.getItem("productBrowseTheTraceJsonData") || [];

             } catch (e) {

                 Window.localStorage.clear(); //删除所有数据

                 localStorage.setItem("productBrowseTheTraceJsonData", JSON.stringify(productBrowseTheTraceArray));

                 alert("异常名字：" + e.name);

                 alert("异常号：" + e.number);

                 alert("异常的描述信息：" + e.description);

                 alert("异常的错误信息：" + e.message);

             }

         } else {

             alert("浏览暂不支持localStorage")

         }

         //或者 if(typeof window.localStorage == 'undefined'){     alert("浏览暂不支持localStorage") }

         $(function () {

             //setItem存储value

             $("#submit").click(function () {

                 var obj =

                  {

                      productId: $("#txtProductId").val(),

                      productName: $("#txtProductName").val(),

                      productPrice: $("#txtProductPrice").val(),

                      productImageUrl: $("#txtProductImageUrl").val(),

                      productAddDateTime: new Date().toLocaleDateString().toString().replace("/", "-").replace("/", "-")

                  };

                  alert(obj);

                 for (var i = 0; i < productBrowseTheTraceArray.length; i++) {   //循环遍历 是否 数组里面已经存在 该数据

                     if (productBrowseTheTraceArray[i].productId == obj.productId) {

                         productBrowseTheTraceArray.splice(i, 1);  //记录过期  移除

                         break;

                     }

                 }

                 productBrowseTheTraceArray.push(obj);

                 var jsonData = JSON.stringify(productBrowseTheTraceArray);

                 alert(jsonData);

                 localStorage.setItem("productBrowseTheTraceJsonData", jsonData);

             });

             $("#getData").click(function () {

                 productBrowseTheTraceArray = JSON.parse(localStorage.getItem("productBrowseTheTraceJsonData")) || [];

                 alert(productBrowseTheTraceArray);

                 var html = [];

                 for (var i = 0; i < productBrowseTheTraceArray.length; i++) {

                     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>";

                 }

                 $("#data").html(html.join(""));

                 alert(html);

             });

         });

         //+---------------------------------------------------

         //| 求两个时间的天数差 日期格式为 YYYY-MM-dd

         //+---------------------------------------------------

         function daysBetween(DateOne, DateTwo) {

             var OneMonth = DateOne.substring(5, DateOne.lastIndexOf('-'));

             var OneDay = DateOne.substring(DateOne.length, DateOne.lastIndexOf('-') + 1);

             var OneYear = DateOne.substring(0, DateOne.indexOf('-'));

             var TwoMonth = DateTwo.substring(5, DateTwo.lastIndexOf('-'));

             var TwoDay = DateTwo.substring(DateTwo.length, DateTwo.lastIndexOf('-') + 1);

             var TwoYear = DateTwo.substring(0, DateTwo.indexOf('-'));

             var cha = ((Date.parse(OneMonth + '/' + OneDay + '/' + OneYear) - Date.parse(TwoMonth + '/' + TwoDay + '/' + TwoYear)) / 86400000);

             return Math.abs(cha);

         }

     </script>

 </head>

 <body>

     Key:<input type="text" id="txtKey" /><br />

     产品Id：<input type="text" id="txtProductId" /><br />

     产品名称：<input type="text" id="txtProductName" /><br />

     产品价格：<input type="text" id="txtProductPrice" /><br />

     产品图片：<input type="text" id="txtProductImageUrl" /><br />

     <input type="button" id="submit" value="添加" />

     <input type="button" id="getData" value="获取localStorage的值" />

     <br />

     <div id="data">

     </div>

 </body>

 </html>

HTML5 的 localStorage（本地数据库） 的用法的更多相关文章

  1. HTML5 使用localstorage 本地存储

    HTML 本地存储介绍 最早的 Cookies 自然是大家都知道,问题主要就是太小,大概也就 4KB 的样子,而且 IE6 只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还 ...

  2. HTML5 LocalStorage 本地存储的用法

    本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...

  3. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  4. localStorage本地存储的用法

    localStorage用法 if(window.localStorage){ alert('这个浏览器支持本地存储'); }else{ alert('这个浏览器支持不本地存储'); } localS ...

  5. （二）HTML5 - Web SQL 本地数据库

    简介 WEB SQL Database即本地的SQLite数据库,使用的方式和方法和SQLite基本相同 判断浏览器是否支持 if (!window.openDatabase) { alert('Da ...

  6. HTML5 — Wed SQL 本地数据库示例

    1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF- ...

  7. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  8. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...

  9. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  10. HTML5本地数据库(WebSQL)[转]

    除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌 ...

随机推荐

  1. C++中有符号/无符号数比较

    原创文章,欢迎阅读,禁止转载. 在我的程序中有如下代码编译被警告了 if(list.size()>msize){...} warning C4018: '<' : signed/unsig ...

  2. node.js之path

    说到node.js,可能实际中用到node进行后台开发的公司不多,大部分人都没有开发后台的经验.但是也要了解node相关模块的用法,因为现在前端自动化脚本的构建,模块的打包越来越离不开node.特别是 ...

  3. Windows 商店应用中使用 Office 365 API Tools

    本篇我们介绍一个API 工具,用于在 Windows Store App 中使用 Office 365 API. 首先来说一下本文的背景: 使用 SharePoint 做过开发的同学们应该都知道,Sh ...

  4. 洛谷P1330 封锁阳光大学

    题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...

  5. JavaScript 学习笔记（一）

    1.javascript中,值包括原始值和对象,原始值包括布尔值.数字.字符串.null和undefined,其他的值为对象. 原始值的特点:(1)按值进行比较:3===3> true; 'ab ...

  6. GNU Makefile编写

    [Introduction] make 是程序员很好用的工具,如果存在makefile存在,每次更新代码,执行shell命令 shell 就可以执行所有需要编译的文件,make是根据你编写的Makef ...

  7. 微信网页开发之创建Controller（三）

    首先,我们需要在App区域下添加一个控制器,这里我们就以AppDemoController为例.如下图所示: 注意:你也可以自己创建其他区域,只是这里推荐使用App区域. 创建好之后,请添加自己的Ac ...

  8. Android性能优化典范第二季

      Google前几天刚发布了Android性能优化典范第2季的课程,一共20个短视频,包括的内容大致有:电量优化,网络优化,Wear上如何做优化,使用对象池来提高效率,LRU Cache,Bitma ...

  9. Microsoft 参考源代码系统更新，有惊喜哦。

    在以前,MS的参考源代码在单步调试时时好用时不好用,最后我找到了原因,那就是如果想用MS的参考源代码进行单步调试,那么你就得想尽办法把系统上的.NET FX降级到RTM版本(卸载各种相关补丁),今天我 ...

  10. 使用WMI和性能计数器监控远程服务器权限设置

    应用场景:在web服务器中,通过.NET编码使用WMI查询远程服务器的一些硬件配置信息,使用性能计数器查询远程机器的运行时资源使用情况.在网上没有找到相关的东西,特记录与大家共享. 将web服务器和所 ...