<!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. autoit小贴士

    如何防止程序重复运行? #include <Misc.au3>_Singleton("test") 如何删除脚本程序自身? ;删除脚本程序自身 Run(@ComSpec ...

  2. 1.5 Eclipse集成开发环境

    1. 格式化nandflash PATH路径优先用前面的 Arm-linux-gdb   # .bashrc   # User specific aliases and functions   ali ...

  3. 《从零开始做一个MEAN全栈项目》（3）

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 上一篇文章给大家讲了一下本项目的开发计划,这一章将会开始着手搭建一个MEAN项目.千里之行,始于足下, ...

  4. （windows）mongoDB3X+Robomongo的安装与基础配置

    一开始安装的时候还觉得很简单真正装了时候发现网上的资料参差不齐再次整理一份安装方法 ---------------------------------------------------------- ...

  5. javascript-with()方法

    1)简要说明         with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象. 2)语法格式  with(object ...

  6. Spark Streaming中空RDD处理及流处理程序优雅的停止

    本期内容 : Spark Streaming中的空RDD处理 Spark Streaming程序的停止 由于Spark Streaming的每个BatchDuration都会不断的产生RDD,空RDD ...

  7. arcgis_engine_c++_runtime_r6034_error

    在启动项目中添加app.manifest文件 <?xml version="1.0" encoding="utf-8"?> <asmv1:as ...

  8. Hibernate中的数据库方言（Dialect）

    在配置hibernate.cfg.xml时需指定使用数据库的方言: 例: <property name="dialect">org.hibernate.dialect. ...

  9. myeclipse中将整块的代码所选中的代码左右移动的快捷键

    myeclipse中将整块的代码/所选中的代码左右移动的快捷键选择你要移动的代码,TAB 右移ctrl+TAB左移(我的使用Shift+TAB管用)要是不使用快捷键就是:选中代码,点击右键选中Shif ...

  10. 在VS中操作Mysql数据库

    1.实现mysql数据库与VS的连接,需要安装两个插件,作者装的是mysql-connector-net-6.9.9.msi和 mysql-for-visualstudio-1.2.6.msi. 2. ...