<!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. C++设计模式-Composite组合模式

    Composite组合模式作用:将对象组合成树形结构以表示“部分-整体”的层次结构.Composite使得用户对单个对象和组合对象的使用具有一致性. UML图如下: 在Component中声明所有用来 ...

  2. HDU2048

    http://acm.hdu.edu.cn/showproblem.php?pid=2048 这道题是错位排序的思想 我们先来考虑第n个数,假设把他放在第k的位置,有n-1种放的方法,那么对于第k位置 ...

  3. 查找SQL SERVER被锁的表和解决方法

    查找数据库中被锁表代码: select   request_session_id   spid,OBJECT_NAME(resource_associated_entity_id) tableName ...

  4. Nginx 502错误触发条件与解决办法汇总(转载)

    一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.有些站长是在刚刚转移到Nginx之后就出现了这个问题,所以经常会怀疑这是不是Nginx的问题,但 ...

  5. dos命令 禁用网络链接

    获取所有的网络链接接口: C:\Users\Chris.JENNEY>netsh interface show interface Admin State State  Type Interfa ...

  6. （Hibernate进阶）Hibernate映射——一对一单向关联映射（五）

    映射原理 两个实体对象之间是一对一的关联映射,即一个对象只能与另外唯一的一个对象相对应.例如:一个人(Person)只有一张身份证(IdCard).我们看一下这个例子的对象模型,如下图所示: 对象模型 ...

  7. MFC 响应控件消息

    第一种,消息映射 第二种,重写OnCommand BOOL CmfcdlgDlg::OnCommand(WPARAM wParam, LPARAM lParam){ switch(wParam) { ...

  8. LR12.53—使用HP网络导游示例应用程序

    本教程使用 的HP Web之旅,一个样本的基于Web的旅行社系统,向人们展示LoadRunner将如何作为负载测试解决方案.惠普网络旅游用户连接到Web服务器,搜索航班,预订机票,检查飞行路线. 虽然 ...

  9. 谈谈React Native环境安装中我遇到的坑

    谈谈React Native环境安装 这个坑把我困了好久,真的是接近崩溃的边缘...整理出来分享给大家,希望遇到跟我一样问题的小伙伴能尽快找到答案. 首先,这是在初始化App之后,react-nati ...

  10. vuex 笔记

    Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...