首页登陆欢迎您!
首页登陆 > 运维知识 > 突袭HTML5之Javascript API扩展3 - 本地存储

突袭HTML5之Javascript API扩展3 - 本地存储

时间:2019-12-14

本文实例讲述了JS实现本地存储信息的方法。分享给大家供大家参考,具体如下:

本地存储解决方案很多,比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。
借用网上的一张图来看下目前主流的本地存储方案:

为什么要存数据到客户端?       存储数据在客户端可以解决很多的问题和减少不必要的传输数据:

WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的userData,Firefox下面的globalStorage,以及Flash的本地存储,除了Flash之外,其他的几个都有一些兼容性的问题。

图片 1

  1. 能保存程序的状态:用户关闭浏览器再打开后能知道他工作到哪了。
  2. 能缓存数据:很多不会变化的数据根本没必要每次都从服务端获取。
  3. 能保存用户的喜好:这种数据通常不需要存在服务端。

sessionStorage与localStorage

  • Cookie: 在web中得到广泛应用,但局限性非常明显,容量太小,有些站点会因为出于安全的考虑而禁用cookie,cookie没有想象中的那么安全,Cookie 的内容会随着页面请求一并发往服务器。
  • Flash SharedObject: 使用的是kissy的 store模块来调用Flash SharedObject。Flash SharedObject的优点是容量适中,基本上不存在兼容性问题,缺点是要在页面中引入特定的swf和js文件,增加额外负担,处理繁琐;还是有部分 机子没有flash运行环境。
  • Google Gears: Google的离线方案,已经停止更新,官方推荐使用html5的localStorage方案。
  • User Data: 是微软为IE专门在系统中开辟的一块存储空间,所以说只支持Windows+IE的组 合,实际测试在2000(IE5.5)、XP(IE6、IE7),Vista(IE7)下都是可以正常使用的。在XP下,一般位于 C:Documents and Settings用户名UserData,有些时候会在C:Documents and Settings用户名Application DataMicrosoftInternet ExplorerUserData。在Vista下,位于C:Users用户名AppDataRoamingMicrosoft Internet ExplorerUserData;单个文件的大小限制是128KB,一个域名下总共可以保存1024KB的文件,文件个数应该没有限制。在受限站点里 这两个值分别是64KB和640KB,所以如果考虑到各种情况的话,单个文件最好能控制64KB以下。
  • localStorage: 相对于上述本地存储方案,localStorage有自身的优点:容量大、易 用、强大、原生支持;缺点是兼容性差些(chrome,  safari, firefox,IE 9,IE8都支持 localStorage,主要是IE8以下版本不支持)、安全性也差些(所以请勿使用localStorage保存敏感信息)。

 

Web Storage实际上由两部分组成:sessionStorage与localStorage。

主要说说localStorage和UserData:

以前的做法      在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择:

sessionStorage用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

UserData

  • 基本语法 :
    XML: <Prefix: CustomTag id=sID style=”behavior:url(‘#default#userData’)” />
    HTML: <ELEMENT style=”behavior:url(‘#default#userData’)” id=sID>
  • Script:
    object.style.behavior = “url(‘#default#userData’)”
    object.addBehavior (“#default#userData”)
  • 属性:
    expires 设置或者获取 userData behavior 保存数据的失效日期。
    XMLDocument 获取 XML 的引用。
  • 方法:
    getAttribute() 获取指定的属性值。
    load(object) 从 userData 存储区载入存储的对象数据。
    removeAttribute() 移除对象的指定属性。
    save(object) 将对象数据存储到一个 userData 存储区。
    setAttribute() 设置指定的属性值。

要使用userData存储功能,必须先建立一个HTML标签,然后将behavior:url(‘#default#userData’)样式属 性加上去,等于说userData是寄存于HTML标签的,当然不是所有标签都是可以的,仅限于部分标签。要了解更多的信息可以访问MSDN的《userData Behavior》 。

这里封装一些方法:

01 var UserData = {
02         userData : null,
03         name : location.hostname,
04         //this.name = "css88.com";
05  
06         init:function(){
07             if (!UserData.userData) {
08                 try {
09                     UserData.userData = document.createElement('INPUT');
10                     UserData.userData.type = "hidden";
11                     UserData.userData.style.display = "none";
12                     UserData.userData.addBehavior ("#default#userData");
13                     document.body.appendChild(UserData.userData);
14                     var expires = new Date();
15                     expires.setDate(expires.getDate()+365);
16                     UserData.userData.expires = expires.toUTCString();
17                 } catch(e) {
18                     return false;
19                 }
20             }
21             return true;
22         },
23  
24         setItem : function(key, value) {
25  
26             if(UserData.init()){
27                 UserData.userData.load(UserData.name);
28                 UserData.userData.setAttribute(key, value);
29                 UserData.userData.save(UserData.name);
30             }
31         },
32  
33         getItem : function(key) {
34             if(UserData.init()){
35             UserData.userData.load(UserData.name);
36             return UserData.userData.getAttribute(key)
37             }
38         },
39  
40         remove : function(key) {
41             if(UserData.init()){
42             UserData.userData.load(UserData.name);
43             UserData.userData.removeAttribute(key);
44             UserData.userData.save(UserData.name);
45             }
46  
47         }
48     };
  1. HTTP cookie。HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)。
  2. IE userData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案,借助DHTML的behaviour属性来存储本地数据, 允许每个页面最多存储64K数据,每个站点最多640K数据,userData的缺点显而易见,它不是Web标准的一部分,除非你的程序只需要支持IE, 否则它基本没什么用处。
  3. Flash cookie。Flash cookie实际上和HTTP cookie并不是一回事,或许它的名字应该叫做"Flash本地存储”,Flash cookie默认允许每个站点存储不超过100K的数据,如果超出了,Flash会自动向用户请求更大的存储空间,借助Flash的 ExternalInterface接口,你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单,就是因为它是 Flash。
  4. Google Gears。Gears是Google在07年发布的一个开源浏览器插件,旨在改进各大浏览器的兼容性,Gears内置了一个基于SQLite的嵌入式 SQL数据库,并提供了统一API对数据库进行访问,在取得用户授权之后,每个站点可以在SQL数据库中存储不限大小的数据,Gears的问题就是 Google自己都已经不用它了。
          眼花缭乱的各种技术导致的就是浏览器的兼容性问题。这里大家用的最多的可能就是cookie了。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

localStorage

非常通俗易懂的接口:

  • localStorage.getItem(key):获取指定key本地存储的值
  • localStorage.setItem(key,value):将value存储到key字段
  • localStorage.removeItem(key):删除指定key本地存储的值

留意localStorage存储的值都是字符串类型,在处理复杂的数据时,比如json数据时,需要借助JSON类,将json字符串转换成真正 可用的json格式,localStorage第二个实战教程会重点演示相关功能。localStorage还提供了一个storage事件,在存储的值 改变后触发。
目前浏览器都带有很好的开发者调试功能,下面分别是Chrome和Firefox的调试工具查看LocalStorage:
图片 2
图片 3
特别注意:localStorage在不同浏览器中的差异研究

图片 4

 

userData

demo页面

这里写了一个简单的demo页面,使用 localStorage和userData 的例子,试着在demo页面的文本框中编辑内容,不要点击发布按钮,关闭或刷新(强制刷新Ctrl+F5)会保存你编辑好的内容,它会始终有效,除非您点击发布按钮删除掉存储的内容。整个过程中没有任何被数据发送到服务器。

demo页面:

HTML5中的全新体验       针对以上的问题,HTML5中给出了更加理想的解决方案:假如你需要存储的只是简单的用key/value对即可解决的数据,则可以使用Web Storage。
      与Cookie相比,Web Storage存在不少的优势,概括为以下几点:
1. 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。
2. 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

语法:

  1. 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。
    4. 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。

XML HTML Scripting object .style.behavior = "url"object .addBehavior

 

属性:

Web Storage分类       Web Storage实际上由两部分组成:sessionStorage与localStorage。
      sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
      localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

expires 设置或者获取 userData behavior 保存数据的失效日期。XMLDocument 获取 XML 的引用。

 

方法:

检查是否支持Web Storage       Web Storage在各大主流浏览器中都支持了,但是为了兼容老的浏览器,还是要检查一下是否可以使用这项技术。
      第一种方式:通过检查Storage对象是否存在来检查浏览器是否支持Web Storage:

getAttribute() 获取指定的属性值。load从 userData 存储区载入存储的对象数据。removeAttribute()移除对象的指定属性。save将对象数据存储到一个 userData 存储区。setAttribute()设置指定的属性值。

if(typeof(Storage)!=="undefined"){
  // Yes! localStorage and sessionStorage support!
  // Some code.....
} else {
  // Sorry! No web storage support..
}

上一篇:微信端开发--登录小程序步骤_javascript技巧_脚本之家 下一篇:没有了