• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 浅谈HTML5的本地存储特性

浅谈HTML5的本地存储特性

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,本地存储等相关知识,匿名希望在学习及工作中可以帮助到您
本地存储,说起来也不是什么新特性,在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的本地存储特性的内容,更多相关内容请关注微课江湖()!

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2017-08-06HTML5中的Article和Section元素认识及使用
  • 2018-12-03HTML5边玩边学(七)-动画初步之飞舞的精灵
  • 2018-12-03HTML5中的postMessage API基本使用方法分享
  • 2018-12-03canvas如何绘制时钟?canvas画环形时钟的实现过程
  • 2017-08-06IE9下html5初试小刀
  • 2017-08-06HTML5的结构和语义(5):内嵌媒体
  • 2018-12-03html5 更新图片颜色示例代码_html5教程技巧
  • 2017-08-06HTML5 embed 标签使用方法介绍
  • 2018-12-03 小强的HTML5移动开发之路(16)——神奇的拖放功能
  • 2017-08-06HTML5 canvas绘制的玫瑰花效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用phonegap对联系人进行查找的方法
    • 基于html5 DeviceOrientation 实现微信摇一摇功能
    • HTML5与Flash对比
    • 总结10篇基本绘图用法实例教程
    • 非常不错的svg教程
    • html5新增加的标签总结
    • html5中设置或返回音视频是否在加载后即开始播放的属性autoplay
    • H5中如何获取和设置自定义属性
    • 有关基础模板的课程推荐
    • 如何借助HTML5微数据优化网页?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有