HTML5本地存储localstorage

摘要:
我个人的想法是在本地保存用户的登录状态、用户的浏览记录和一些插件设置,或者换句话说,以前使用cookie的地方基本上可以被localStorage取代。localStorage localStorage的操作是以的形式设置和读取的,其操作也非常简单。LocalStorage.length:返回已存储的变量数。LocalStorage.getItem:与LocalStorage.k一样,获取键值为k的变量的值。LocalStorage.removeItem:删除键值为k。LocalStorage的变量。clear():清除所有变量。文件名通常是domain_数字localstoragelocalStorage的兼容性表明,并非所有浏览器都支持localStorage,例如IE6和IE7。varSTORE_ NAME='localStorage';//用于保存userData的元素。
localStorage的用途

localStorage基本上就是三个特点:

  1. 数据永久被保存在本地,即使浏览器被关闭,数据也不会消失
  2. 存储空间大,一般为5~10M
  3. 存储的内容不会和服务器发生任何交互(cookie就会随着请求发送给server)

因此,当你需要持久的存储用户的数据,并且不和服务器交互时,就可以使用localStorage。个人想到的就是在本地保存用户的登录状态,保存用户的浏览记录,以及一些插件设置等等,或者换句话说,以前用cookie的地方现在基本上都可以使用localStorage进行替代。

localStorage的操作

localStorage是以(Key,Value)的形式进行设置和读取的,它的操作也非常的简单。

localStorage.length: 返回现在已经存储的变量数目。
localStorage.key(n): 返回第n个变量的键值(key)。
localStorage.getItem(k): 和localStorage.k一样,取得键值为k的变量的值。
localStorage.setItem(k , v): 和localStorage.k = v一样,设置键值k的变量值。
localStorage.removeItem(k): 删除键值为k的变量。
localStorage.clear(): 清空所有变量。

在Chrome中,localStorage是以文件的形式存储的,存储路径为:C:UsersUserNameAppDataLocalGoogleChromeUser DataDefaultLocal Storage。文件名一般为domain_number.localstorage

localStorage的兼容性

HTML5本地存储localstorage第1张

可以看出,并不是所有的浏览器都支持localStorage的,比如IE6和IE7。说到这里,就不得不说一下本地存储的进化历程,从下图可以对比出localStorage的优势和来之不易:

HTML5本地存储localstorage第2张

cookie的主要问题是容量太小了;userData的问题是只针对IE+Windows的组合;Flash的问题是需要引入swf等相关文件;Gears是谷歌提出的方案,已经停止更新了。

因此,我们主要还是要使用UserData来处理IE6-7的本地存储。

userData使用

 userData声明语法:

XML<Prefix: CustomTag ID=sID STYLE="behavior:url('#default#userData')" />
HTML<ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>
Scriptingobject .style.behavior = "url('#default#userData')"
object .addBehavior ("#default#userData")

userData常用方法:

MethodDescription
getAttributeRetrieves the value of the specified attribute.
loadLoads an object participating in userData persistence from a UserData store.
removeAttributeRemoves the specified attribute from the object.
saveSaves an object participating in userData persistence to a UserData store.
setAttributeSets the value of the specified attribute.

详细使用方法请看:http://msdn.microsoft.com/en-us/library/ms531424(v=vs.85).aspx

OurJS对不同浏览器下localStorage进行了统一封装:

if (window.localStorage || !document.documentElement.addBehavior || location.protocol === 'file:') {
    return;
  }

  /**
   * 为不支持 localStorage 的浏览器提供类似的功能。
   * @name localStorage
   * @namespace
   * @description
   *   在不支持 localStorage 的浏览器中,会使用路径 '/favicon.ico' 来创建启用 userData 的元素。应保证上述路径存在,以免出现预料外的异常。
   *   userData 的尺寸限制为每文件 128KB,每域 1024KB;受限站点每文件 64KB,每域 640KB。
   */
  var localStorage = window.localStorage = {};

  // 指定一个固定的 userData 存储文件名。
  var STORE_NAME = 'localStorage';

  // 用来保存 userData 的元素。
  var storeElement;

  // 在当前域的根路径创建一个文档,并在此文档中创建用来保存 userData 的元素。
  try {
    // 使用这种方式(而不是在当前文档内直接插入 IFRAME 元素)可以避免在 IE6 的应用代码中调用 document.write 时出现“已终止操作”的异常。
    // http://www.cnblogs.com/my_life/articles/2749709.html: 推技术ActiveXobject("htmlfile") 长连接
    var storeContainerDocument = new ActiveXObject('htmlfile'); //创建对象
    storeContainerDocument.open(); //打开
    storeContainerDocument.write('<iframe   src="http://t.zoukankan.com/favicon.ico"></iframe>'); //添加
    storeContainerDocument.close(); //关闭
    // IE6 IE7 IE8 允许在 document 上插入元素,可以确保代码的同步执行。
    var storeDocument = storeContainerDocument.getElementById('store').contentWindow.document;
    storeElement = storeDocument.appendChild(storeDocument.createElement('var'));
  } catch (e) {
    // 若创建失败,则仅实现不能跨路径的 userData 访问。
    storeElement = document.documentElement;
  }
  // 添加行为。
  storeElement.addBehavior('#default#userData');

//--------------------------------------------------[localStorage.getItem]
  /**
   * 从 localStorage 中读取一条数据。
   * @name localStorage.getItem
   * @function
   * @param {string} key 数据名。
   * @returns {?string} 数据值。
   *   如果指定的数据名不存在,返回 null。
   */
  localStorage.getItem = function(key) {
    storeElement.load(STORE_NAME);
    return storeElement.getAttribute(key);
  };

//--------------------------------------------------[localStorage.setItem]
  /**
   * 在 localStorage 中保存一条数据。
   * @name localStorage.setItem
   * @function
   * @param {string} key 数据名,不能为空字符串。
   * @param {string} value 数据值。
   * @description
   *   注意:与原生的 localStorage 不同,IE6 IE7 的实现不允许 `~!@#$%^&*() 等符号出现在 key 中,可以使用 . 和 _ 符号,但不能以 . 和数字开头。
   */
  localStorage.setItem = function(key, value) {
    storeElement.load(STORE_NAME);
    storeElement.setAttribute(key, value);
    storeElement.save(STORE_NAME);
  };

//--------------------------------------------------[localStorage.removeItem]
  /**
   * 从 localStorage 中删除一条数据。
   * @name localStorage.removeItem
   * @function
   * @param {string} key 数据名。
   */
  localStorage.removeItem = function(key) {
    storeElement.load(STORE_NAME);
    storeElement.removeAttribute(key);
    storeElement.save(STORE_NAME);
  };

//--------------------------------------------------[localStorage.clear]
  /**
   * 清空 localStorage 中的所有数据。
   * @name localStorage.clear
   * @function
   */
  localStorage.clear = function() {
    var attributes = Array.from(storeElement.XMLDocument.documentElement.attributes);
    storeElement.load(STORE_NAME);
    attributes.forEach(function(attribute) {
      storeElement.removeAttribute(attribute.name);
    });
    storeElement.save(STORE_NAME);
  };

总之就是先创建一个userData对象,然后使用它的操作封装到localStorage的一些方法里面。

参考资料:

OurJS】: https://github.com/s79/OurJS/blob/gh-pages/src/browser.js

推技术ActiveXobject("htmlfile") 长连接】: http://www.cnblogs.com/my_life/articles/2749709.html

【JavaScript本地存储实践】: http://www.css88.com/archives/3717

免责声明:文章转载自《HTML5本地存储localstorage》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇logstash过滤器插件filter详解及实例[NewLife.XCode]百亿级性能下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

HTML5 video 详解 属性 事件 方法

时至今天 2016年12月9日,chrome 的 版本 55.0.2883.75 (64-bit)。浏览器自带的播放器已经足够强大了,看下图,现在完全没必要去自己创建个播放器了。(可以想象html5视频播放器就是一套theme(皮肤)) 1.0.1. 那么 HTML5 (视频)- 如何工作 ? HTML5 中显示视频,您所有需要的是: <vide...

HTML5列表、块和布局

-----------------siwuxie095                                     HTML5 列表         标签 描述 <ol> 有序列表 <ul> 无序列表 <li> 列表项 <dl> 列表 <dt> 列表...

【HTML5版】导出Table数据并保存为Excel

首发我的博客 http://blog.meathill.com/tech/js/export-table-data-into-a-excel-file.html 最近接到这么个需求,要把<table>显示的数据导出成Excel表。类似的需求并不稀罕,过去我通常用PHP输出.csv文件,不过这次似乎不能这么做:数据源表格允许用户筛选和排序,与原...

使用 video.js 开发 HTML5 视频页面

时间 2015-05-13 17:11:58The GIS Guy 原文 http://thegisguy.tk/html5-video-using-video-js/ 主题Video.jsHTML5 使用 video.js 简单几步编写一个可以在微信、QQ内置浏览器中正常工作的 HTML5 视频播放器。 HTML5 标签看似简单,但在不同...

【物联网智能网关13】Html5:Canvas+WebSocket实现远程实时通信(上)

在上一篇博文《网关为核心,互联网为基础构建物联网平台》中简要介绍了基于.NET Micro Framework如何构建Web Server应用,本篇文章将基于Html5的Canvas和WebSocket技术详细介绍远程实时通信的实现。 无论是windows还是linux平台都已提供现成的Web Server技术,在服务端支持诸如ASP.net、ASP、PH...

基于HTML5的WebGL结合Box2DJS物理应用

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎,但同样通过3D的呈现能让人更直观的体验到碰撞效果,最终例子效果: http://hightopo.com/demo/box2djs/h...