<!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. ASP.net 中手工调用WS(POST方式)

    ASP.net 中手工调用WS(POST方式)核心代码:string strUrl="http://localhost:21695/service1.asmx/getmythmod" ...

  2. .net操作数据库，史上最牛逼的方法,你见过这种方法吗

    免费分享给大家.下载地址在最下面. C# code   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...

  3. ASP.NET权限管理

    ASP.NET Web Forms权限管理: 我要将一个文件夹只能让一个用户组访问怎么办? 可否在网站根目录下的web.config里这样设置: <location path="adm ...

  4. Hyperledge 开发环境配置常见问题

    一,安装工具 VBOX vagrant vagrant proxy golang 二,下载源代码 hyperledge gotools  三. 1. ==> default: package g ...

  5. js工厂方式和构造函数

    工厂方式 //工厂方式 : 封装函数 function createPerson(name){ //1.原料 var obj = new Object(); //2.加工 obj.name = nam ...

  6. Android IOS WebRTC 音视频开发总结（八十七）-- WebRTC中丢包重传NACK实现分析

    本文主要介绍WebRTC中丢包重传NACK的实现,作者:weizhenwei ,文章最早发表在编风网,微信ID:befoio 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID ...

  7. centos,nginx安装备忘

    # ssh 登录慢解决 vim /etc/ssh/sshd_config UseDNS no # add limitsvi /etc/security/limits.conf* soft nproc ...

  8. 转载：reactor模式学习

    最近又重新看了下netty背后的设计思想,接触到了reactor模型.发现以前虽然也看过reactor和proactor模型的介绍,但是真的是只了解了个皮毛. 再重新学习了一遍,有了更深刻的认识.但是 ...

  9. SpringMVC学习笔记(四)

    一.Controller接受网页参数. 1.使用方法的形参来接受 //使用基本类型和字符串来接受 @RequestMapping(value="/param2.do") publi ...

  10. 数组中第K小的数字（Google面试题）

    http://ac.jobdu.com/problem.php?pid=1534 题目1534:数组中第K小的数字 时间限制:2 秒 内存限制:128 兆 特殊判题:否 提交:1120 解决:208 ...