HTML5本地存储 localStorage

HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下:

localStorage.setItem(‘a‘, ‘xxxxxx‘);  // 设置
localStorage.getItem(‘a‘);  // 获取
localStorage.removeItem(‘a‘); // 删除

下面说说有关localStorage和sessionStorage的特性。

1、存储格式

仅仅存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。

2、生命周期

在数据存储的时效性上,localStorage并不会像cookie那样可以设置数据存活的时限。也就是说,只要用户不主动删除,localStorage存储的数据将会永久存在。

3、存储位置

当然,对于localStorage数据的存储,是存在于本地的文件系统中的,例如,对于chrome来说,localStorage数据的存储位置是在:C:\Users\{userName}\AppData\Local\Google\Chrome\User Data\Default\Local Storage中。对于其他4大浏览器,大家可以自行查找进行查看。

4、数据共享

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

5、兼容性

可以看到,除IE外的其他浏览器很早的版本都支持了,对于IE低版本系列的浏览器,我们需要一个兼容方案来处理。

微软在IE5.0以后,自定义了一种持久化用户数据的概念userData,这种存储方式只有IE浏览器自己支持。来看看其如何操作——

(function(win) {
    // 对于IE,且不支持localStorage的浏览器
    // 即针对IE6/7
    if ( typeof win.attachEvent != "undefined" && typeof win.localStorage == "undefined") {
        var localFileName = "_simulateLocalStorage",
            expires = 365,
            formField = null;

        // 设置有效期为365天
        var expire = new Date();
        expire.setDate(expires + expire.getDate());

        formField = document.createElement("input");
        formField.type = "hidden";
        formField.addBehavior(‘#default#userData‘);

        document.body.appendChild(formField);

        var storage = {
            setItem : function(key, value) {
                formField.load(localFileName);
                formField.setAttribute(key, value);
                formField.save(localFileName);
            },
            getItem : function(key) {
                formField.load(localFileName);
                return formField.getAttribute(key);
            },
            removeItem : function(key) {
                formField.load(localFileName);
                formField.removeAttribute(key);
                formField.save(localFileName);
            },
            clear : function() {
                formField.load(localFileName);
                var d = new Date();
                d.setDate(d.getDate() - 1);
                formField.expires = d.toUTCString();
                formField.save(localFileName);
            }
        };

        win["localStorage"] = storage;
    }
})(window);

这里仅仅是对IE兼容性的简单包装,下面的链接给出非常完善的针对localStorage兼容性的解决方案。

https://github.com/machao/localStorage

6、存储大小

对于HTML5的localStorage而言,其大小支持为5M(当然,各浏览器的大小差异还是有的)。对于IE的userData,用户数据的每个域最大为64KB。

7、应用场景

建议不要使用localStorage方式存储敏感信息,哪怕这些信息进行过加密。另外,对身份验证数据使用localStorage进行存储还不太成熟。我们知道,通常可以通过xss漏洞来获取到Cookie,然后用这个Cookie进行身份验证登录,但是浏览器可以通过HttpOnly来保护Cookie不被XSS攻击获取到。而localStorage存储没有对XSS攻击有任何防御机制,一旦出现XSS漏洞,那么存储在localStorage里的数据就极易被获取到。

参考:

1> 《Web前端黑客技术揭秘》

2> github-machao-localStorage

3> HTML5 LocalStorage 本地存储

4> localStorage、sessionStorage用法总结

转自 http://www.cnblogs.com/jinguangguo/p/4083919.html

时间: 2024-08-05 22:31:32

HTML5本地存储 localStorage的相关文章

HTML5本地存储LocalStorage和sessionStorage

以前用wordpress做博客的时候,我做了个点赞的功能.设计这个点赞功能的时候,为防止访客不断刷赞,得做个时间间隔限制,首先我的设计方案是在数据库里记录ip和点赞的时间,后来一想那还得维护数据库(其实是觉得都没人点赞还弄得那么严格搞什么),果断改成把数据放到本地保存. 本地存储数据首先想到得是cookie和html5的 localStorage. cookie兼容性好,但是存储的数据量太少;localStorage存储量大,但是兼容性不是很好,毕竟ie6之流还是有不少份额的.最后考虑到 htm

HTML5本地存储localStorage与sessionStorage

在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了 大小:每个域名是5M. 注:cookie一

HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明. localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串.不同浏览器对该 API 支持情况有所差

HTML5 本地存储 LocalStorage

说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家 都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样. userData是IE的东西,垃圾.现在用的最多的是Flash吧,空间是Cookie的25倍,基本够用.再之后Google推出了

HTML5本地存储-localStorage和sessionStorage

HTML5WebStorage本地存储 WebStorage是用来实现客户端存储数据,大家都知道之前的Cookie就是客户端存储的一种方式,今天看一看html5新增的本地存储方式:localStorage和sessionStorage. localStorage:存储的数据会一直存在本地客户端,即使浏览器关闭了也会存在: sessionStorage: 只是针对同一个 session 的数据存储,打开一个新来浏览器窗口或者窗口一旦关闭数据就没了.  既然知道了这两种新的本地存储方式,那怎么用那?

HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明. localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串.不同浏览器对该 API 支持情况有所差

HTML5本地存储localStorage、sessionStorage及IE专属UserData

By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属,随着HTML5的普及,新的本地存储方式localStorage和sessionStorage将在标准浏览器上大展身手.localStorage和sessionStorage是HTML5的新特性之一,说是新特性,其实微软公司早在IE8上就已经支持localStorage和sessionStorage这

html5 本地存储----localstorage初体验

HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性.就我所做的项目而言,应用的HTML5相关特性有:data-自定义属性.placeholder.以及email类型input文本框.最近了解了一下html的本地存储功能(例如cookies和localstorage),今天主要要和大家分享的是localstorage的一些基础常识: 废话不多说直接上代码(有注释),大家可以看看: <!doctype html> <html lang="en&q

Html5本地存储LocalStorage

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 在浏览器中打开审查元素(如谷歌F12),在Resources下面可以查看里面的数据. localStorage提供了几个方法: 1.存储:localStorage.setItem(key,value);或localStorage.key="value"; 如果key存在时,更新value 2.获取:localSt