谈谈h5 WebStorage的那点事儿
2016-07-14 22:43
260 查看
WebStorage是HTML5中本地存储的解决方案之一,在HTML5引入WebStorage这个概念之前,浏览器兼容的本地存储方案就只有使用cookie。有人可能就会问,既然有了cookie本地存储,为什么还要引入WebStorage的概念?今天,小羊快跑就和您说道说道。。。
首先来谈谈WebStorage的好处:
1.减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递;
2.快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示;
3.临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。
引入WebStorage的原因是为了解决本来不应该cookie做,却不得不用cookie的本地存储这一老大难的问题。
WebStorage提供两种类型的API:localStorage和sessionStorage,其中,localStorage在本地永久性存储数据,除非显式将其删除或清空,sessionStorage存储的数据只在会话期间有效,关闭浏览器则自动删除。
下面将为您分析一下sessionStorage
、localStorage
和 cookie三者之间的异同:
共同点:都是保存在浏览器端,且同源的。
区别:
1. cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下;
2. 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大;
3. 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭;
4. 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的;
5. WebStorage支持事件通知机制,可以将数据更新的通知发送给监听者;
6. WebStorage 的 api 接口使用更方便。
不知道看完这篇文章,您对H5引入WebStorage会不会更满意了呢?!
——————————
完结!
首先来谈谈WebStorage的好处:
1.减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递;
2.快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示;
3.临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。
引入WebStorage的原因是为了解决本来不应该cookie做,却不得不用cookie的本地存储这一老大难的问题。
WebStorage提供两种类型的API:localStorage和sessionStorage,其中,localStorage在本地永久性存储数据,除非显式将其删除或清空,sessionStorage存储的数据只在会话期间有效,关闭浏览器则自动删除。
下面将为您分析一下sessionStorage
、localStorage
和 cookie三者之间的异同:
共同点:都是保存在浏览器端,且同源的。
区别:
1. cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下;
2. 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大;
3. 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭;
4. 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的;
5. WebStorage支持事件通知机制,可以将数据更新的通知发送给监听者;
6. WebStorage 的 api 接口使用更方便。
不知道看完这篇文章,您对H5引入WebStorage会不会更满意了呢?!
——————————
完结!
相关文章推荐
- ASP Cookies操作的详细介绍与实例代码
- 清除cookies的批处理(bat)
- javascript显弹效果代码增加了cookies控制
- 用cookies实现闪电登录论坛方法
- JavaScript入门教程 Cookies
- c# 对cookies(增、删、改、查)的操作方法
- 利用H5特性FormData实现不刷新文件上传
- js从Cookies里面取值的简单实现
- 基于h5 ajax实现手机定位(demo)
- 基于h5的history改善ajax列表请求体验
- .net中的session与cookies区别及使用方法
- ASP.NET与ASP互通COOKIES的一点经验
- DNS查找, 域名, 和Cookies
- JavaScript的Cookies
- asp.net COOKIES需要注意的一点
- 二级域名或跨域共享Cookies的实现方法
- javascript 操作cookies及正确使用cookies的属性
- 怎样使用php与jquery设置和读取cookies
- cookie解决微信不能存储localStorage的问题
- 详解JavaScript中localStorage使用要点