有趣得html5存储

HTML5的几种存储方式

html5在引入webStorage之前,主要用cookies.

web storage

html5的webstorage 分两种:LocalStorage 和SessionStorage,两者的差别主要在生命周期不同。

    1. LocalStorage
      LocalStorage用于持久化的本地存储,存储资料在客户端(client)的浏览器上,除非主动删除数据,否则数 据是永远不会过期的。LocalStorage使用键值对的方式进行存储,存储的方式只能是字符串。存储内容可以有图片、json、样式、脚本等只要可以序列化为字符串的。2 . SessionStorage

    2. SessionStorage用于本地存储一个会话中 的数据,这些数据只有在同一个会话中的页面才能访问并且会话结束,例如关闭窗口后,,数据也会随之被销毁。它是一种会话级别的存储。

      SessionStorage的使用方法与localstorage的使用方法相似。

      • webstorage 与cookie的区别

        • cookie数据始终在同源的http请求中携带,cookie在浏览器和服务器端来回传递,而localstorage和sessionstorage不会自动把数据传送给服务器端,仅在本地保存。

        • 存储大小限制不同,cookie的存储数据大小要求不能超过4k,每次的http请求都会携带cookie,所以保存的数据需要比较小。sessionstorage和localstorage存储数据大小限制比cookie要大,可以达到5m或者更大,不同浏览器设置可能不同。

        • 数据生命周期有所不同。cookie的生命周期一般在其设置的过期时间之前有效。而sessionstorage仅在关闭窗口前有效,localstorage持久有效,直到手动删除。

        • 作用域不同,sessionstorage不在不同浏览器中共享,即使是同一页面也不支持。而localstorage在所有同源窗口中都是共享的,同样,cookie在所有同源窗口中也是可以共享的。

        • cookie的数据还有路径的概念,可以通过设置限制cookie只属于某一个路径。

        • web storage支持事件通知机制,可以将数据更新的通知发送给监听者。

      • 使用webstorage的好处:

        • 减少网络流量:使用webstorage将数据保存在本地中,不用像cookie那样,每次传送信息都需要发送cookie,减少了不必要的数据请求,同时减少数据在浏览器端和服务器端来回传递。

        • 快速显示数据:从本地获取数据比通过网络从服务器获取数据效率要高,因此网页显示也要比较快。

        • 临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。

        • 不影响网站效能:因为web storag只作用在客户端的浏览器,不会占用频宽,不想网站效能,所以可以把size大,安全性低的资料存储在web storage中,提ga高网站效能。

posted @ 2018-07-13 16:52  夢无言meng  阅读(112)  评论(0编辑  收藏  举报