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原理示意图. 图 ...
随机推荐
- Centos 6.5 SNMP客户端安装及配置版本net-snmp-5.7.3
Centos 6.5 SNMP客户端安装及配置SNMP版本:net-snmp-5.7.3.tar.gz1.下载软件cd /usr/local/srcyum -y install gccwget htt ...
- zz剖析为什么在多核多线程程序中要慎用volatile关键字？
[摘要]编译器保证volatile自己的读写有序,但由于optimization和多线程可以和非volatile读写interleave,也就是不原子,也就是没有用.C++11 supposed会支持 ...
- Bigendian 奇数内存地址取整形crash
在大端机器(solaris-sparc,hpux-hppa)上从奇数内存地址取一个整形(2 or 4 bytes)会崩溃.如: unsigned short Res = *(unsigned shor ...
- 怎么创建一个Database快照
How to create the database Snapshot: use mastergoif not exists (select * from sys.databases where na ...
- centos7 下修改时区
#timedatectl status //显示当前设置 #timedatectl list-timezones //列出时区 #timedatectl set-timezone Asia/Shang ...
- 这些年正Android - 母亲
记得小时候,在自己写完一篇作文,完成母亲布置的任务后,就会搬走母亲正在使用的大椅子,面朝门前的马路,就这么憧憬的坐着,听着母亲给小孩打针时,小孩哇哇的哭声,努力的幻想着自己以后能做一个顶天立地的男子汉 ...
- C#读写者线程（用AutoResetEvent实现同步）（转载）
C#读写者线程(用AutoResetEvent实现同步) 1. AutoResetEvent简介 通知正在等待的线程已发生事件.无法继承此类. 常用方法简介: AutoResetEvent(bool ...
- ue4 c++ 接口
使用UE4接口比起普通的高级语言,要多做很多工作,是因为要兼容蓝图的使用,有一些小坑需要注意,开始吧. 1.新建接口类 打开UE4编辑器,与往常一样,新建C++类,然后选择Object继承,然后取名字 ...
- 第六百一十八天 how can I 坚持
此刻好烦,乱七八糟的,红米2死机也没弄好,哎. 下周三去长城,感觉还有很大提升空间啊,什么都不会.哎. 眼累的不行了,得抓紧睡觉了.ls他们来北京开年会了.. 明天,zjp来找我玩呢. 睡觉了.累.
- webpack 入门
webpack webpack,是一款模块加载器兼打包工具.能将 JS.coffee.less.sass.图片等作为模块来使用. 经过一个多月的摸索,姑且算是入门了.因此重新写个小DEMO来加深自己对 ...