本地存储sessionStorage 、 localStorage 、cookie整理

sessionStorage 、 localStorage 、cookie 的区别

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，能够方便的在web请求之间保存数据。有了本地数据，就能够避免数据在浏览器和服务器间没必要要地来回传递。

sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同学口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即便刷新页面或进入同源另外一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不一样窗口，即便是同一页面，sessionStorage对象也是不一样的。

Web Storage带来的好处：减小网络流量：一旦数据保存在本地后，就能够避免再向服务器请求数据，所以减小没必要要的数据请求，减小数据在浏览器和服务器间没必要要地来回传递。快速显示数据：性能好，从本地读数据比经过网络从服务器得到数据快得多，本地数据能够即时得到。再加上网页自己也能够有缓存，所以整个页面和数据都在本地的话，能够当即显示。临时存储：不少时候数据只须要在用户浏览一组页面期间使用，关闭窗口后数据就能够丢弃了，这种状况使用sessionStorage很是方便。

 

浏览器本地存储与服务器端存储之间的区别

浏览器端能够保存一些数据，须要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。

服务器端也能够保存全部用户的全部数据，但须要的时候浏览器要向服务器请求数据。1.服务器端能够保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。2.服务器端也能够保存用户的临时会话数据。服务器端的 session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id便可，服务器根据session id找到对应用户的 session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。

服务器端保存全部的用户的数据，因此服务器端的开销较大，而浏览器端保存则把不一样用户须要的数据分布保存在用户各自的浏览器中。浏览器端通常只用来存储小数据，而服务器能够存储大数据或小数据。 服务器存储数据安全一些，浏览器只适合存储通常数据。

 

sessionStorage 、localStorage 和 cookie 之间的区别

共同点：都是保存在浏览器端，且同源的。

区别：

一、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 Storage 支持事件通知机制，能够将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

 

sessionStorage与页面 js 数据对象的区别

　　页面中通常的 js 对象或数据的生存期是仅在当前页面有效，所以刷新页面或转到另外一页面这样的从新加载页面的状况，数据就不存在了。而sessionStorage 只要同源的同学口（或tab）中，刷新页面或进入同源的不一样页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或从新加载，数据仍然存在。

 

cookie，容量4kb，默认各类浏览器都支持，缺陷就是每次请求，浏览器都会把本机存的cookies发送到服务器，无形中浪费带宽。

userdata，只有ie支持，单个容量64kb，每一个域名最多可存10个共计640k数据。默认保存在C:\Documents and Settings\Administrator\UserData\目录下，保存格式为xml。

 

sessionStorage与localStorage

Web Storage实际上由两部分组成：sessionStorage与localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

 

为何选择Web Storage而不是Cookie？

与Cookie相比，Web Storage存在很多的优点，归纳为如下几点：

1. 存储空间更大：IE8下每一个独立的存储空间为10M，其余浏览器实现略有不一样，但都比Cookie要大不少。

2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操做更为简便。

4. 独立的存储空间：每一个域（包括子域）有独立的存储空间，各个存储空间是彻底独立的，所以不会形成数据混乱。