Home  >  Article  >  Web Front-end  >  浅谈HTML5的本地存储特性

浅谈HTML5的本地存储特性

PHP中文网
PHP中文网Original
2016-05-17 09:09:091755browse

本地存储,说起来也不是什么新特性,在HTML5之前的我们已经可以通过各种方法保存本地数据,基本上包括以下方法:

  • HTTP Cookie 大小限制在4KB

  • IE专有特性userData 大小限制在64KB

  • Flash 大小限制100KB

  • Google Gears 大小限制无

  • HTML5 本地存储 大小限制5MB



Cookies大家都知道,存储量很小,大概也就4KB的样子,而且IE6限制每个域名20个cookies。不过Cookie的优势是通用性。几乎没有用户去禁用浏览器的Cookie功能。

userData是IE的专用特性,正是因为专用所以没人用,估计知道的人都不多。现在用的最多的是Flash的本地存储吧,空间是Cookie的25倍,大小基本够用。

后来Google发布了Google Gears,存储大小虽然没有限制,但是要装额外的插件,就这一条就把这个功能枪毙了,除非Goggle能保证 Google Gears 的装机率达到90%以上。

HTML5的出现终于解决了这一难题。首先是大小限制,W3C的给建议是每个网站5MB,这已经很大,用来存些字符串数据,绰绰有余了。其次是通用性,HTML5是一个浏览器标准,大家统一标准是迟早的事。虽说HTML5 本地存储的大小限制是5MB,但是有些浏览器在使用本地空间超出50MB时可以向用户征得同意以增加存储空间,例如Safari。对于HTML5开发者来说,5MB空间是相当够用了。

对HTML5 本地存储的支持的情况如上图, 非常出人意料的是IE在8.0的时候就支持了,这也是我在查阅相关资料时才发现的。需要注意的是,使用IE、Firefox在本地做测试的时候需要把文件上传到服务器上(或者也可以在本地搭建服务器),直接打开本地的HTML文件,是无法使用本地存储的。
如果想使用HTML5本地存储的话,为了照顾到老式浏览器,首先必须检测浏览器是否支持本地存储。在HTML5中,本地存储包括localStorage和sessionStorage,前者是一直存在本地的,后者只是在网页打开时暂时储存,窗口一旦关闭存储的信息就清空了。二者用法基本上相同,这里以localStorage为例。



1: if(window.localStorage){
2: alert('This browser supports localStorage');
3: }else{
4: alert('This browser does NOT support localStorage');
5: }
复制代码

  1. 存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:


1: localStorage.a = 3;//设置a为"3"
2: localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
3: localStorage.setItem("b","isaac");//设置b为"isaac"
4: var a1 = localStorage["a"];//获取a的值
5: var a2 = localStorage.a;//获取a的值
6: var b = localStorage.getItem("b");//获取b的值
7: localStorage.removeItem("c");
复制代码


//清除c的值
获取设置键值推荐使用getItem()和setItem(),清除键值对使用removeItem()。 使用clear() 清除所有的键值对。
HTML5本地存储只能储存字符串数据,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。
HTML5的本地存储提供了一个storage事件,可以监听对键值对的改变,使用方法如下:

1: if(window.addEventListener){
2: window.addEventListener("storage",handle_storage,false);
3: }else if(window.attachEvent){
4: window.attachEvent("onstorage",handle_storage);
5: }
6: function handle_storage(e){
7: if(!e){e=window.event;}
8: //showStorage();
9: }
复制代码


事件变量e,是一个StorageEvent对象,提供了一些实用的属性,可以很好的观察键值对的变化。
§         key                   String           监听到改变的键名称

§         oldValue         任意              改变前的值

§         newValue       任意              改变后的值

§         url                     String           监听到键值改变对应的页面地址

目前javascript使用最多的数据格式是json,如果想用HTML5的本地存储来存储Json数据,直接调用JSON.stringify()将json数据转为字符串。读取出来后再调用JSON.parse()将字符串转为json格式,代码如下所示:

var details = {author:"isaac","description":"fresheggs","rating":100};
storage.setItem("details",JSON.stringify(details));
details = JSON.parse(storage.getItem("details"));
复制代码


以上就是浅谈HTML5的本地存储特性的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn