判断浏览器是否支持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. npm ERR publish 403,nodejs发布包流程

    nodejs学习体验之发布包,发布环境如下:1:win10系统,2:已安装nodejs. 具体操作步骤如下: *编写模块 1)新建文件夹,比如:somepackage 2) 该文件夹下新建js文件,比 ...

  2. MyBatis Generator 详解 【转来纯为备忘】

    版权声明:版权归博主所有,转载请带上本文链接!联系方式:abel533@gmail.com   目录(?)[+] MyBatis Generator中文文档 运行MyBatis Generator X ...

  3. unity3d多线程坑

    单独起了一个线程来处理网络相关操作,比较常规的做法.本身没啥特别的东西,碰到了一个不大不小的坑折腾了好久,记录下来吧. 简单的说就是子线程中抛出的异常,如果没有catch的话,会导致子线程悄无声息的退 ...

  4. 解决hadoop启动后datanode无法启动问题

    hadoop部署完成后datanode无法启动问题解决 1.检查是否有遗留的hadoop进程还在运行,如果有的话,先stop-all.sh或kill杀掉: 2.在master节点上,删除/tmp/ha ...

  5. ubuntu安装packet提示重复冲突问题

    今天装个zip出现: dpkg: error processing archive /var/cache/apt/archives/libc6-dev-i386_2.19-0ubuntu6.5_amd ...

  6. Linq To Xml基础

    <?xml version="1.0" encoding="utf-8" ?> <Books> <Category Order=& ...

  7. MFC学习随笔(1)

    最近在学习用MFC编写一个简单的界面.其实MFC并不是十分复杂的,经过一段时间的熟悉就可以实现许多基础功能.但是在编写的过程中,经常会遇到林林总总的bug,让人摸不到头脑.今天记录一个过去没有注意过的 ...

  8. Linux内核--网络栈实现分析(六)--应用层获取数据包(上)

    本文分析基于内核Linux 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7541907 更多请看专栏,地址http: ...

  9. 如何在Windows中编译Linux Unix的代码(采用cygwin)?

    来源:http://www.cnblogs.com/rocky_yi/archive/2009/12/08/cygwin.html   作者:rocky_y 很多经典算法往往是用C++在linux下实 ...

  10. ASP.NET连接远程Oracle数据库,提示试图加载格式不正确的程序

    VS调试远程连接Oracle数据库,一直报错 由于本地计算机是64位的操作系统,而且也确定安装的Oracle客户端是64位的 ,但是一直提示这个错误. 试了很多方法,终于发现可能是 不能在VS中调试的 ...