正文  软件开发 > html5 >

web本地存储,web存储

web本地存储,web存储  随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cooki...

web本地存储,web存储

  随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,每一次发送请求都会携带上cookie,会造成带宽的浪费,给开发带来诸多不便,HTML5规范则提出解决方案。

  web存储的含义是将数据存储到用户的电脑上,这样可以缓解服务器的压力,并且提高体验。 1 特性 1、设置、读取方便。 2、容量较大,sessionStorage约5M、localStorage约20M。 3、只能存储字符串,可以将对象JSON.stringify() 编码后存储。 2 window.sessionStorage 1、生命周期为关闭当前页面窗口。 2、不能多窗口下数据可以共享 (同源策略,百度家的local阿里他们家是拿不到)。 补充:通过跳转可以 。 运用场景:   1、页面跳转的时候可以通过session实现数据共享。   2、在一些单页面(spa)的运用中,进行页面传值的时候比较有用。 3 window.localStorage 1、永久生效,除非手动删除或用代码删除。 2、可以多窗口共享(同源策略)。 运用场景:一些不涉及到安全的一些数据(不要太过庞大)都可以存储到本地。 4 方法详解 setItem(key, value) 设置存储内容 window.localStorage/sessionStorage.setItem(key,value); getItem(key) 读取存储内容 window.localStorage/sessionStorage.getItem(key,value); removeItem(key) 删除键值为key的存储内容 window.localStorage/sessionStorage.removeItem(key,value); clear() 清空所有存储内容 window.localStorage/sessionStorage.empty(); key(n) 以索引值来获取键名 window.localStorage/sessionStorage.key(n); length 存储的数据的个数 window.localStorage/sessionStorage.length; 区别: cookie数据 : 始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。数据有效期不同。 sessionStorage仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持。 localStorage始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。作用域不同,sessionStorage不能在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。 相同点:都是存储数据,存储在web端,并且都是同源。 不同点: (1)cookie 只有4K 小 并且每一次请求都会带上cookie 体验不好,浪费带宽。2)session和local直接存储在本地,请求不会携带,并且容量比cookie要大的多。3)session 是临时会话,当窗口被关闭的时候就清除掉 ,而 local永久存在,cookie有过期时间。4)cookie 和local都可以支持多窗口共享,而session不支持多窗口共享 但是都支持a链接跳转的新窗口。

http://www.bkjia.com/HTML5/1235317.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1235317.htmlTechArticleweb本地存储,web存储 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在...