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 | 页面称为引发这种变化的方法 |
下面是一些使用例子：
<!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（本地数据库） 的用法的更多相关文章
- HTML5 使用localstorage 本地存储
HTML 本地存储介绍 最早的 Cookies 自然是大家都知道,问题主要就是太小,大概也就 4KB 的样子,而且 IE6 只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还 ...
- HTML5 LocalStorage 本地存储的用法
本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...
- 初识html5的localStorage本地存储
一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...
- localStorage本地存储的用法
localStorage用法 if(window.localStorage){ alert('这个浏览器支持本地存储'); }else{ alert('这个浏览器支持不本地存储'); } localS ...
- （二）HTML5 - Web SQL 本地数据库
简介 WEB SQL Database即本地的SQLite数据库,使用的方式和方法和SQLite基本相同 判断浏览器是否支持 if (!window.openDatabase) { alert('Da ...
- HTML5 — Wed SQL 本地数据库示例
1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF- ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
- HTML5本地数据库(WebSQL)[转]
除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌 ...
随机推荐
- 如何防止JAVA反射对单例类的攻击？
在我的上篇随笔中,我们知道了创建单例类有以下几种方式: (1).饿汉式; (2).懒汉式(.加同步锁的懒汉式.加双重校验锁的懒汉式.防止指令重排优化的懒汉式); (3).登记式单例模式; (4).静态 ...
- Java学习笔记 04 类和对象
一.类和对象的概念 类 >>具有相同属性和行为的一类实体 对象 >>实物存在的实体.通常会将对象划分为两个部分,即静态部分和动态部分.静态部分指的是不能动的部分,被称为属性,任 ...
- 【九度OJ】题目1054：字符串内排序
题目描述: 输入一个字符串,长度小于等于200,然后将输出按字符顺序升序排序后的字符串. 输入: 测试数据有多组,输入字符串. 输出: 对于每组输入,输出处理后的结果. 样例输入: bacd 样例输出 ...
- grunt
Grunt是node的自动化构建工具,可以执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务. 类似于C/C++程序通过makefile管理编译测试打包的过程,Java程序通过Maven,A ...
- ＃笔记＃ CSS工作流
目录 明确代码规范 CSS Reset 关于前缀 浮动闭合 CSS的前处理器(Preprocessor)和后处理器(Postprocessor) 明确代码规范 目的是确保跨平台协作多人开发的代码显示界 ...
- Linux:-bash: ***: command not found,系统很多命令都用不了
系统:64位RHEL6 突然之间linux很多命令都用不了,均提示没有此命令. 这应该是系统环境变量出现了问题导致的. 出现这种可能性的原因有很多,大多数是因为,安装了新的软件要配置环境变量,但是没有 ...
- 用户 'IIS APPPOOL\ASP.NET V4.0' 登录失败 解决办法…………
在iis管理器中-->应用程序池-->ASP.NET V4.0---->高级设置-->标识-->改为localSystem
- solr&lucene3.6.0源码解析（三）
solr索引操作(包括新增 更新 删除 提交 合并等)相关UML图如下 从上面的类图我们可以发现,其中体现了工厂方法模式及责任链模式的运用 UpdateRequestProcessor相当于责任链模式 ...
- 在RHEL6p5中设置网卡
前提: 在用ifconfig -a查看时已经显示出wlan0(无线网卡)的存在(即不用装驱动,驱动另记) 工具: 1.yum install wpasupplicant* 2.yum install ...
- MediaWiki安装与配置（Ubuntu 10.4）
实验室准备发布一个网站,本来是准备外包给别人做的,后来自己调研了一下,发现也没有想象的复杂和困难,于是最近一周自己吭哧吭哧地把网站搭好了. 之所以使用Mediawiki,一是考虑到是以实验室发布,不想 ...