客户端存储之HTML5 web存储
2016-04-05 21:31
260 查看
最近在学习如何实现客户端存储,这篇文章将主要分析H5的web storage以及它与传统的cookie之间的区别。
2、以cookie存储的数据,无论服务器端是否需要,每次HTTP请求时,都会将cookie数据传送到服务端,有时会造成带宽浪费,而web storage 中的数据只会存储在本地
3、web storage有更加丰富易用的接口,比如setItem()、getItem()、removeItem()、clear()等,使数据操作更简便;而cookie没有提供,需要通过document对象的cookie属性来完成
4、兼容性差异:cookie所有浏览器都支持,而web storage 在IE8下不支持
5、cookie默认的有效期很短暂,一旦用户关闭浏览器,cookie保存的数据就丢失了;但一旦设置cookie有效期,数据则会一直保存直到失效期。在这点上,它与sessionStorage的区别是:cookie作用域不是局限在浏览器的单个标签页,而是整个浏览器进程。
1、在有效期上,localStorage是永久性的,除非用户或者开发者刻意删除,否则数据将一直存储在用户电脑上。而sessionStorage一旦窗口或者标签页关闭,通过sessionStorage存储的数据也将被删除。
2、在作用域上,二者都会受到文档源额限制,也就是说,非同源文档之间是无法共享本地存储的数据的;除了文档源额限制,localStorage还会受到浏览器厂商的限制。举例来说,当前用Firefox打开一个站点,下次用Chrome打开同一站点,也无法访问上次存储的数据;除了文档源额限制,sessionStorage还会受到窗口的限制。也就是说,即使是同源文档在浏览器的不同标签页时,他互相之间拥有的也是各自的sessoionStorage对象。
web存储与cookie的区别以及优势:
1、cookie只适合存储少量文本数据,而web存储可存储大量数据2、以cookie存储的数据,无论服务器端是否需要,每次HTTP请求时,都会将cookie数据传送到服务端,有时会造成带宽浪费,而web storage 中的数据只会存储在本地
3、web storage有更加丰富易用的接口,比如setItem()、getItem()、removeItem()、clear()等,使数据操作更简便;而cookie没有提供,需要通过document对象的cookie属性来完成
4、兼容性差异:cookie所有浏览器都支持,而web storage 在IE8下不支持
5、cookie默认的有效期很短暂,一旦用户关闭浏览器,cookie保存的数据就丢失了;但一旦设置cookie有效期,数据则会一直保存直到失效期。在这点上,它与sessionStorage的区别是:cookie作用域不是局限在浏览器的单个标签页,而是整个浏览器进程。
web 存储 : localStorage、sessionStorage
web存储定义了两种对象:localStorage、sessionStorage,二者是以windows对象的属性形式存在,对于IE8以前的浏览器,可以用IE的userData作为H5 web存储的替代方案。localStorage与sessionStorage区别:
二者的区别主要体现在有效期和作用域上。1、在有效期上,localStorage是永久性的,除非用户或者开发者刻意删除,否则数据将一直存储在用户电脑上。而sessionStorage一旦窗口或者标签页关闭,通过sessionStorage存储的数据也将被删除。
2、在作用域上,二者都会受到文档源额限制,也就是说,非同源文档之间是无法共享本地存储的数据的;除了文档源额限制,localStorage还会受到浏览器厂商的限制。举例来说,当前用Firefox打开一个站点,下次用Chrome打开同一站点,也无法访问上次存储的数据;除了文档源额限制,sessionStorage还会受到窗口的限制。也就是说,即使是同源文档在浏览器的不同标签页时,他互相之间拥有的也是各自的sessoionStorage对象。
相关文章推荐
- websocket使用
- 30多个HTML5经典动画应用展示
- HTML5性能优化与分析
- HTML5 声明兼容IE的写法(转载)
- 手把手教你搭建自己的Java Web(Android)项目(SpringMVC + Mybatis服务端,Html5 Web端, Android客户端实现)
- HTML5调用摄像头实例
- h5 和之前版本的区别
- html5:服务器事件推送(server-sent events)Asp.net
- html5
- HTML5 -1- 简介
- 移动h5自适应布局
- html5 图片热点area,map的用法
- html5 svg 圆形进度条
- H5拍照应用开发经历的那些坑儿
- HTML5学习第一天
- HTML5 之 基本标签、属性
- html5学习系列之ef类标签
- 【缓存\性能】HTML5缓存的那些事
- HTML5 -- WebSocket
- html5学习系列之cd标签