Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
 
除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
 
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生
 
浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
 
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等、
区别:localStorage在浏览器关闭之后之前的数据还会存在,sessionStorage在浏览器关闭之后之前的数据会被清除掉;

浏览器支持

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

注意: Internet Explorer 7 及更早IE版本不支持web 存储.

不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

  • 保存数据:localStorage.setItem(key,value);
  • 读取数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);

提示: 键/值对通常以字符串存储,你可以按自己的需要转换该格式。

HTML5存储的更多相关文章

  1. html5存储相关 coookie localstorage session storage

    html5存储 coookie  localstorage   session storage

  2. HTML5存储方式

    由于之前在参加面试或者笔试的过程中经常会被问到HTML5存储的内容,包括它们之间的区别.特征和应用范围,所以看到一篇介绍不错的文章,把里面的个人觉得适合我的内容按照自己的理解总结如下.方便以后忘记了进 ...

  3. html5存储方式localstorage和sessionStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...

  4. HTML5存储之 indexedDB

    IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...

  5. 谈谈html5存储之IndexdDB

    IndexdDB简介 html5中indexdDB是一种能在浏览器持久的存储结构化数据的数据库:且具有丰富的查询能力. 新建一个IndexdDB数据库 IDBOpenDBRequest定义有几个重要的 ...

  6. HTML5存储--离线存储

    离线存储技术 HTML5提出了两大离线存储技术:localstorage与Application Cache,两者各有应用场景:传统还有离线存储技术为Cookie. 经过实践我们认为localstor ...

  7. HTML5存储(带一个粗糙的打怪小游戏案例)

    本地存储localStorage设置存储内容setItem(key,value) localStorage.setItem('leo','23'); 更新存储内容对象[key]=value对象.key ...

  8. html5 存储篇(一)

    localStorage 和 sessionStorage      localStorage 与 sessionStorage的相同点:         (1).都是用于客户端存储的技术,相对于传统 ...

  9. HTML5存储技术Storage

    前端存储技术localStorage是永久存储sessionStorage是一次会话存储 localStorage只支持string类型的存储 存进去的所有类型, 取出来之后都变成了string. 一 ...

随机推荐

  1. Ganglia安装扩容

    现有的环境中Hbase集群的机器需要安装ganglia,遂采取了以下步骤. 查看机器的信息, uname –a cat /etc/issue 查看当前环境是x86的,安装的是red hat 6.4 之 ...

  2. OpenStack Austin 峰会观察:OpenStack as IaaS 已是过去,Solutions on OpenStack 才是未来

    虽然搞 OpenStack 前后也有几年,但是今年在美国 Austin 举办的 OpenStack Summit 我还是第一次参加.回来之后,一直还在回味,觉得要写点东西,将我在这次峰会上的观察和思考 ...

  3. Java开发之@PostConstruct和@PreConstruct注解

    从Java EE5规范开始,Servlet增加了两个影响Servlet生命周期的注解(Annotation):@PostConstruct和@PreConstruct.这两个注解被用来修饰一个非静态的 ...

  4. extra增强延迟加载

    这种配置和配置为lazy=true是一样的,但它的好处在于调用size/contains等方法时,并不查询整个集合的数据,而是发送一条sql语句来处理,只有真正在使用时才全部去查询整个集合

  5. Collider Collision 区别

    Collision 中带有碰撞的信息,例如:速度和撞击到的点 示例 void OnCollisionEnter2D(Collision2D coll) { foreach(ContactPoint c ...

  6. FMS 客户端带宽计算、带宽限制

    FMS 客户端带宽计算.带宽限制 1. 带宽计算 FMS内置了带宽检测的特性(被称作"native bandwidth detection"),要进行带宽检测,客户端只要在成功连接 ...

  7. jmeter jdbc request使用详解

    1.在使用 jdbc request之前需要加载一个jar包 在test plan中将jar包引入到classpath中 2.创建一个JDBC Connection Configuration Var ...

  8. 南邮CTF隐写之丘比龙的女神

    刚开始下载下图片来 习惯性的binwalk一下 没发现东西 formost一下也没分离出来 扔进c32asm中发现有nvshen.jpg 于是改后缀名字为.zip 解压nvshen.jpg发现无法解压 ...

  9. 039医疗项目-模块四:采购单模块—采购单的创建-----------Dao层,service层,Acion层

    我们根据数据库里面的表格:生成对应的Mapper接口文件和...Mapperxml文件: YYCGD:采购单模板表. YYCGD2014:采购单动态生成表,由存储过程生成. YYCGDMX:采购单明细 ...

  10. 032医疗项目-模块三:药品供应商目录模块——供货商药品目录查询功能----------Service层和Action层和调试

    我们上一篇文章讲了Dao层代码: 这一篇我们讲解Service层和Action层: Service层: 分为接口和实现类,我们主要看实现类:GysemplServiceImpl package yyc ...