Chinaunix首页 | 论坛 | 博客
  • 博客访问: 616872
  • 博文数量: 210
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2062
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(210)

文章存档

2020年(2)

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: JavaScript

2016-11-01 19:12:47

HTML4中使用cookies在客户端保存诸如用户名等简单的信息,但是,使用cookies存储永久数据存在以下问题:

 

大小:cookies的大小限制在4KB

带宽:cookies是随HTTP事务一起被发送的,因此会浪费一部分带宽

复杂性:正确的操纵cookies是很困难的

 

HTML5重新提供了一种在客户端本地保存数据的功能,Web Storage

Web Storage功能,就是在Web上存储数据,分为两种:

 

sessionStorage:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,session对象可用来保存在这段时间内所要求保存的任何数据

 

localStorage:将数据保存在客户端本地的硬件设备中,即使浏览器关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可用

 

区别:sessionStorage为临时保存,localStorage为永久保存

HTML5中提供了localStorage对象可以将数据长期保存在客户端,直到人为清除。localStorage提供了几个方法:

1、存储:localStorage.setItem(key,value)

如果key存在时,更新value


2、获取:localStorage.getItem(key)

如果key不存在返回null


3、删除:localStorage.removeItem(key)

一旦删除,key对应的数据将会全部删除

4、全部清除:localStorage.clear()

某些时候使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据


5、遍历localStorage存储的key

.length 数据总量,例:localStorage.length

.key(index) 获取key,例:var key=localStorage.key(index);

 

6、存储JSON格式数据

JSON.stringify(data)  将一个对象转换成JSON格式的数据串,返回转换后的串

JSON.parse(data) 将数据解析成对象,返回解析后的对象

 

客户的信息分为:姓名、E-Mail地址、电话号码、备注,需要把它们保存在localStorage中,如果输入用户姓名,可以进行检索并获取该客户的所有信息


实例:实现一个简单的对cookies内 localStorage 对文本框信息在html页面输出:

代码如下:

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         姓名: <input type="text" placeholder="请输入你的名字" id="name"/><br />
  9.         年龄: <input type="text" placeholder="请输入的你的年龄" id="age"/><br />
  10.         性别: <input type="text" placeholder="请输入的你的年龄" id="sex"/><br />
  11.         爱好: <input type="text" placeholder="请输入的你的年龄" id="hoby"/><br />
  12.         运动: <input type="text" placeholder="请输入的你的年龄" id="sport"/><br />
  13.         <button id="btn">保存    </button><br />
  14.         输入<input type="text" placeholder="输入你要查找的人" id="search"/><br />
  15.         <button id="btn2">检索</button><br />
  16.         <div id="box" style="border: 1px solid red; width: 100px; height: 200px;"></div>
  17.         
  18.     </body>
  19.     <script type="text/javascript">
  20.         var n = document.getElementById("name");
  21.         var age = document.getElementById("age")    
  22.         var btn= document.getElementById("btn");
  23.         var search = document.getElementById("search");
  24.         var btn2= document.getElementById("btn2");
  25.         var box =document.getElementById("box");
  26.         var sex =document.getElementById("sex");
  27.         var hoby=document.getElementById("hoby");
  28.         var sport =document.getElementById("sport");
  29.         
  30.         
  31.         
  32.         var obj={};    //新建一个对象存储数据
  33.         btn.onclick = function(){
  34.             //把输入的信息写入localStorage中去
  35.             //把所需的信息传给这个对象
  36.             obj.name=n.value;
  37.             obj.age = age.value;
  38.             obj.sex= sex.value;
  39.             obj.hoby=hoby.value;
  40.             obj.sport=sport.value;
  41.             //把这个对象呢,以JSON的格式传给一个变量(字符串形式)赋给一个变量
  42.             var value = JSON.stringify(obj);
  43.             //放进localStorage里面
  44.             localStorage.setItem(obj.name,value);
  45.             
  46.         }
  47.         btn2.onclick = function(){
  48.             //搜索的input的value赋值给一个变量
  49.             var n1=search.value;
  50.                 //遍历localStorage
  51.                 for(var i=0; i<localStorage.length;i++){
  52.                     //把localStorage键值赋给一个变量进行下一步的判断
  53.                     var k = localStorage.key(i);
  54.                     console.log(k);
  55.                     if( k == n1){
  56.                         //获取到localStorage的键值
  57.                         var value =localStorage.getItem(k);
  58.                         //将得到的value进行JSON.parse进行转译
  59.                         var a = JSON.parse(value);
  60.                         //最后输出在html页面上
  61.                         box.innerHTML="

    "+"姓名:"+a.name +"

    "
    +"

    "+"年龄:"+a.age +"

    "
    +"

    "+"性别:"+a.sex +"

    "
    +"

    "+"                            爱好:"+a.hoby +"

    "
    +"

    "+"运动:"+a.sport +"

    "
    ;
  62.                         
  63.                     }
  64.                     
  65.                 }
  66.                 
  67.             
  68.         }
  69.         
  70.     </script>
  71. </html>
现象的效果:
成功写入:

成功查找:




阅读(660) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~