<!DOCTYPE html>
<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储存实例的更多相关文章

  1. <<< html5本地储存

    类似与Cookies,但由于Cookies储存量太小,大小也只有4-5KB的样子,html5的本地储存能存5M大小的数据 html5本地储存属性有,localStorage和sessionStorag ...

  2. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  3. HTML5 localStorage使用教程

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

  4. HTML5与CSS3实例教程(第2版) 附源码 中文pdf扫描版

    HTML5和CSS3技术是目前整个网页的基础.<HTML5与CSS3实例教程(第2版)>共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.这一版全面讲解了最新的HTML5和 ...

  5. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  6. (转载)HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  7. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  8. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询

    响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...

  9. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

随机推荐

  1. Doxygen给C程序生成注释文档

    近段时间,一直在学习华为C语言编程规范(2011版),在“注释”这一章中发现了一种“Doxygen”的注释转文档工具,查看诸多相关资料,并进行编程实践,终于可以利用Doxygen给C程序生成注释文档. ...

  2. 使用C#开发计划任务调度服务

    在系统运维中常常需要定期去跑一些计划任务,比如扫描服务器监控其性能.检查SQL Server作业是否正常.监控MQ队列是否存在堵塞现象等.如果使用Windows计划任务调度,一来管理起来就比较松散,二 ...

  3. TFS 自动同步Server 端文件的批处理命令

    TFS 自动同步Server 端文件的批处理命令 目前在我们组的工作中很多时候需要将TFS上Server端的代码自动无人值守的同步到本地中来, 找到了一些解决方案的资料http://bbs.scmro ...

  4. 一个简单的TabItem样式。

    分享一个以前项目中用到的简单的TabItem样式. 效果图如下: <SolidColorBrush x:Key="TabItemDisabledBackground" Col ...

  5. Map小结

    Map主要用于存储健值对个人理解:因为Map是根据键得到值,因此需要保证键值的唯一性,不允许键重复(重复了覆盖了),但允许值重复.1.HashMap根据键的HashCode 值存储数据,根据键可以直接 ...

  6. OpenWrt自定义和官方一样的固件

    我用的OpenWrt版本是Barrier Breaker 14.07,硬件是NetGear WNDR4300. 我自定义固件的目的是把固件的根分区扩到最大(100MB,总FLASH是128MB),试过 ...

  7. 12，SFDC 管理员篇 - 页面配置

    1, 添加Tab Setup | Create | Tab 通过Tab我们可以为我们新建的表对象添加访问路径   2,创建自定义按钮 我们想在Account 中添加一个自定义按钮,去链接外部页面,也可 ...

  8. My SQL的内连接，外链接查询

    1.内连接:只连接匹配的行. 2.左外连接:包含左边表的全部行,以及右边表中所有匹配的行,无论右边的表有没有和左边匹配的行,左边的所有行都必须要显示. 3.右外连接:包含右边表的全部行,以及左边表中所 ...

  9. Mac下命令行中用sublime打开指定文件 设置方法

    sublime2版本 官网提供的方法:sublime2 官网提供的方法是:ln -s "/Applications/Sublime Text 2.app/Contents/SharedSup ...

  10. Hive集成HBase;安装pig

    Hive集成HBase 配置 将hive的lib/中的HBase.jar包用实际安装的Hbase的jar包替换掉 cd /opt/hive/lib/ ls hbase-0.94.2*  rm -rf ...