zoukankan      html  css  js  c++  java
  • h5的本地存储

    什么是本地存储

    以下内容从网上抄来的

    HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。
    简单的说本地存储是HTML5的一部分。更为详细准确的说是本地存储过去是HTML5的标准中的一部分,而后来由于有些工作组的人表示HTML5太庞大了,于是就剥离出来作为一个单独的标准。这听起来好像是把一块馅饼分成很多块目的是为了减少总的卡路里……

    为什么要用本地存储

    其实前面已经提到了,用本地存储有这些好处

    • 本地存储和cookie一样提供了把数据保存到本地的能力,页面刷新或者关掉浏览器后,数据依然存在
    • 大!虽然不同浏览器的标准可能不一样,主流的一般都在5~10M,比cookie的4k强多了
    • 本地存储的数据不会被发到服务器,与cookie相比,节省带宽,加快响应速度

    所以,如果需要保存一些数据到用户的浏览器,而这些数据又不需要每个请求都提交给服务器,不妨考虑使用本地存储。

    如何使用

    首先,得检查浏览器是否支持本地存储
    可以通过检测window下面是否有localStorage字段来判断,但是在IE下,本地文件是不能访问localStorage的,此时localStorage字段为空,所以还要加上判断

    'localStorage' in window && window['localStorage']!== null

    还有一种情况,假如页面里有id为localStorage的元素,某些浏览器可以通过window.localStorage索引到这个元素-___,-||
    为了避免你的代码在遇到如此蛋疼的DOM时跪掉,我建议是使用特征检查

    window.localStorage && window.localStorage.getItem

    确定浏览器支持localStorage后,我们就可以使用它的接口了,localStorage的使用方法很简单,在chrome的控制台里面打印一下localStorage,就能列出它的全部方法,我相信很多人一看就能明白了。

    我们主要用到的

    length:本地存储数据的个数
    setItem(key,value):向key字段写入value数据
    getItem(key):去key字段的数据
    removeItem(key):移除key字段
    clear():清空该域下的所有数据
    key(i):获取第i个数据的key

    我们还可以像操作一个Object一样操作localStorage

    var ls=localStorage;
    ls['user']='John';
    ls.setItem('work','codding');
    console.info(ls.length); //2
    console.info(ls.user + ' is ' + ls.work); //John is codding
    ls['work']='debugging';
    console.info(ls.user + ' is ' + ls.work); //John is debugging
    delete ls['work'];
    for(var i in ls){
      console.info(i + ' : ' + ls.getItem(i)); //user : John
      ls.removeItem(i);
    }

    唯一不同的是,对于一个不存在的字段notExist,localStorage.getItem(‘notExist’)会返回null,而localStorage[‘notExist’]则返回undefined。

    一些细节

    看到这里,你已经掌握了使用本地存储的方法了,下面的是我使用过程中的一些心得。
    本地存储只能存字符串数据,所有数据在写入的时候会被隐式调用toString方法转为字符串,即

    var ls=localStorage;
    var data={
      user:"John",
      sex:"female"
    };
    ls.setItem('data',data);
    ls.setItem('realData',JSON.stringify(data));
    console.info(ls.data); //[object Object]
    console.info(ls.realData); //{"user":"John","sex":"female"}

    因此,需要存储json之类的数据时,需要自己做转换。
    不同浏览器,分配给本地存储的空间是不一样的,譬如chrome是5M。这5M是整个子域共享的,例如http://www.alloyteam.com/2012/04/codejam/和http://www.alloyteam.com/2012/03/css3-checkbox/两个页面同在www.alloyteam.com域下,它们共享同一个本地存储空间,访问到的数据也是同一份;而http://csslib.alloyteam.com/在csslib.alloyteam.com域下,访问的是另一个存储空间。
    一个unicode字符占2个字节(英文和中文一样),所以5M可以存储1024*1024/2=524288个字符,包括key和value。也就是说,localStorage.setItem(‘user’,’John’)向本地存储写进了8个字符(16Byte)。这个网站有一份各种浏览器分配给localStorage存储空间大小的表,你也可以在上面测试当前使用的浏览器支持多大的存储空间,不过它的数据有个问题,它没有考虑到一个unicode字符占2字节,因此它的数据应该全部乘2。
    当本地存储满了,再往里面写数据,将会触发error(这点和cookie的表现不一样),因此一个严谨的脚本应该捕捉写localStorage的错误

    var FIVE_MB=Array(5*1024*512).join('囧');
    try{
      localStorage.setItem('x',FIVE_MB);
    }catch(e){
      console.info('Oops');
    }

    当调用localStorage.clear()时,整个域的数据会被清空,包括和当前页面共享一个存储空间的其他页面。

    浏览器不支持本地存储怎么办

    对于IE6和IE7,有userData,可以提供最多1024kb的空间,虽然userData可以设置有效期,但是仍然存在写满报错的问题,并且userData创建的存储文件不能被枚举,因此需要人为地维护。
    另外还可以使用内嵌flash控件,使用flash的本地存储空间,flash默认提供100kb,使用更多需要用户授权。
    这两种方法的使用成本较高,本文就不再展开讨论了。

    转载自AlloyTeam:http://www.alloyteam.com/2012/04/sth-about-localstorage/

  • 相关阅读:
    Python 学习笔记 11.模块(Module)
    Python 学习笔记 8.引用(Reference)
    Python 学习笔记 9.函数(Function)
    Python 学习笔记 6.List和Tuple
    Python 学习笔记 4.if 表达式
    Python 学习笔记 2.自省
    Python 学习笔记 3.简单类型
    Python 学习笔记 7.Dictionary
    Python 学习笔记 5.对象驻留
    Python 学习笔记 10.类(Class)
  • 原文地址:https://www.cnblogs.com/timejs/p/4746599.html
Copyright © 2011-2022 走看看