HTML5 ---localStorage储存实例
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
*原理：
* 存儲到localStorage
* 考慮到存儲方式如下
* localStorage.setItem(key,value);
* 要存儲到數據有幾個數據包在一起，恩慈要綁定起來，，可以使用對象存儲起來，如：
* var obj = new Object();
obj["id"] = id;
obj["name"] = name;
obj["price"] = price;
* //對象轉字符串
var strs = JSON.stringify(obj);
*
*
* //存儲 key value
localStorage.setItem(id,strs);
*
*
*
*
*/
function dats(id,name,price)
{
console.log("id:"+id+"name:"+name+"price:"+price);
var obj = new Object();
obj["id"] = id;
obj["name"] = name;
obj["price"] = price;
// for (var key in obj)
// {
// console.log(obj["name"]);
// }
//對象轉字符串
var strs = JSON.stringify(obj);
// console.log(strs);
//存儲 key value
localStorage.setItem(id,strs);
}
function updata()
{
// console.log("updata");
//獲取存儲數據
var data = localStorage.getItem(12);
// console.log(data);
//字符串轉對象
var dataObj = JSON.parse(data);
console.log(dataObj["id"]);
}
function removeItemdata(key)
{
// console.log("removeItemdata");
localStorage.removeItem(key);
}
function Cleardata()
{
console.log("Cleardata");
//獲取存儲長度
var dataLen = localStorage.length;
for (var i = 0 ; i < dataLen ; i++)
{
//獲取key
var key = localStorage.key(i);
//取出對應key到數據
updata(key);
}
}
</script>
</head>
<body>
<button onclick="dats(12,'dd',33)" style="height: 30px;width: 50%;text-align: center;">save</button>
<button onclick="updata()" style="height: 30px;width: 50%;text-align: center;">upData</button>
<button onclick="removeItemdata(12)" style="height: 30px;width: 50%;text-align: center;">removeItem</button>
<button onclick="Cleardata()" style="height: 30px;width: 50%;text-align: center;">Clear</button>
<input id="txt" type="text" name="name" style="height: 40px;width: 95%;padding: 5px;"/>
</body>
</html>
HTML5 ---localStorage储存实例的更多相关文章
- <<< html5本地储存
类似与Cookies,但由于Cookies储存量太小,大小也只有4-5KB的样子,html5的本地储存能存5M大小的数据 html5本地储存属性有,localStorage和sessionStorag ...
- 《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...
- HTML5 localStorage使用教程
在客户端存储数据,HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...
- HTML5与CSS3实例教程(第2版) 附源码 中文pdf扫描版
HTML5和CSS3技术是目前整个网页的基础.<HTML5与CSS3实例教程(第2版)>共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.这一版全面讲解了最新的HTML5和 ...
- HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...
- (转载)HTML5 LocalStorage 本地存储
原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）
最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询
响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发
Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...
随机推荐
- Win10 disable 最近打开
1. 开始菜单 -> Settings -> Personalization -> Start 2. Set "Show most used apps" Off ...
- PHP5.6.15连接Sql Server 2008配置方案
php5.6的如果想连接Sql Server 2008数据库,需要手动配置扩展和安装一个驱动. 下载SQL Server Driver for PHP的扩展包,64位系统的官方不支持,找到一个非官方的 ...
- System.Threading.Timer 定时器的用法
System.Threading.Timer 是C# 中的一个定时器,可以定时(不断循环)执行一个任务.它是在线程上执行的,具有很好的安全性.为此 .Net Framework 提供了5个重载的构造 ...
- 【AppCan 开发者】北京开发者交流会之行
不久前AppCan官方组织了开发者交流会活动,我有幸参加了这次活动,官方报销全部费用,还有妹子相伴,哇哇,这是光明正大打FB的节奏啊~ (呃,说实话,这是俺第一次去帝都~心里挺激动的~) 10.25帝 ...
- 15，SFDC 管理员篇 - 变更和部署
Setup | Deploy | Sandbox 通过在Production上建立Dev .Test 两套环境来 Sandbox 有四种类型 Developer Sandbox & Dev ...
- cacti应用
cacti被很多IDC/CDN提供商用来进行带宽计算使用:带宽的95计费(95th Percentile charging) 95计费法是CDN常用计费方法: CDN基本上是每月结一次款.每5分钟取一 ...
- [转]常用的快速Web原型图设计工具
转自大神: http://www.cnblogs.com/lhb25/archive/2009/04/25/1443254.html 做产品原型是非常重要的一个环节,做产品原型就会用使用各式各样的工具 ...
- 采用TCP协议实现PIC18F97J60 ethernet bootloader
了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). TCP/IP Stac ...
- QNDataSet打印预览自动关闭问题
问题:打印预览后,数据集自动关闭 解决: TQNDataSet = class(TFDMemTable) private protected procedure PSReset; override; ...
- XP局域网内专用消息队列
网上能找到DELPHI消息队列的方法,在XP下试了总是不成功,后来在2003上试就行了,对比发现消息队列属性->安全 2003中多了个用户ANONYMOUS_LOGON. 然后在XP下消息队列属 ...