Cookie，sessionStorage 和 localStorage 的区别

sessionStorage、localStorage、cookie都是在浏览器端存储的数据。

1. Cookie是在客户端用于存储会话信息的。

过程：服务器对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分，其中包含会话信息。例如Set-Cookie：name = value。浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加Cookie HTTP头将信息发送回服务器。例如Cookie：name = value。

编码：Cookie的名称和值在传送时都必须是URL编码的。

分类：

会话cookie是指在不设定它的失效时间expires时的状态。浏览器的开启到关闭就是一次会话，当关闭浏览器时，会话cookie就会跟随浏览器而销毁。当关闭一个页面时，不影响会话cookie的销毁。会话cookie就像我们没有办理积分卡时，单一的买卖过程，离开之后，信息则销毁。

持久cookie则是设定了它的失效时间expires。此时，cookie像商品一样，有个保质期，关闭浏览器之后，它不会销毁，直到设定的过期时间。对于持久cookie，可以在同一个浏览器中传递数据，比如，你在打开一个淘宝页面登陆后，你在点开一个商品页面，依然是登录状态，即便你关闭了浏览器，再次开启浏览器，依然会是登录状态。这就是因为cookie自动将数据传送到服务器端，在反馈回来的结果。持久cookie就像是我们办理了一张积分卡，即便离开，信息一直保留，直到时间到期，信息销毁。

访问限制：遵循同源策略。正常情况下Cookie不可跨域名，如域名www.google.com颁发的Cookie不会被提交到域名www.baidu.com去。这是由Cookie的隐私安全机制决定的。即使在同一个一级域名下的两个二级域名如www.agx.com和images.agx.com也不能交互使用Cookie，因为二者的域名并不严格相同。如果想所有agx.com名下的二级域名都可以使用该Cookie，则需要设置Cookie的domain参数为”.agx.com”。

性能：由于所有的cookie都会由浏览器作为请求头发送，所以在cookie中存储大量信息会影响到特定域的请求性能。Cookie信息越大，完成对服务器请求的时间越长。所以最好尽可能在cookie中少存储信息，以避免影响性能。

sessionStorage 和 localStorage 由HTML5 Web Storage API 提供，可以在web请求之间保存数据。有了本地数据，可以避免数据在浏览器和服务器间不必要地来回传递。

2. sessionStorage

失效时间：sessionStorage存储特定于某个会话的数据，即该数据只保持到浏览器关闭。存储在sessionStorage中的数据可以跨越页面刷新而存在，若浏览器支持，浏览器崩溃重启之后依然可用。sessionStorage是在同源的同窗口（或tab）中始终存在的数据。即只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage才被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。

访问限制：因为sessionStorage对象绑定于某个服务器会话，所以当文件在本地运行的时候是不可用的。存储在sessionStorage中的数据只能由最初给对象存储数据的页面才能访问到，所以对多页面应用有限制。

3. LocalStorage

LocalStorage能够持久保存客户端数据。

失效时间：存储在LocalStorage中的数据保留到通过JavaScript删除或者用户清除浏

览器缓存。

访问限制：要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效）、使用同一种协议、在同一个端口上。

Web Storage带来的好处：

1. 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。

2. 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。

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

 

特性	Cookie	localStorage	sessionStorage
数据的生命期	默认是关闭浏览器后失效，可设置失效时间，过期时间之前一直有效，即使窗口或浏览器关闭	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右。每次http请求都会携带cookie，只适合保存很小的数据	一般为5MB	一般为5MB
与服务器端通信	cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。如果使用cookie保存过多数据会带来性能问题。	仅在客户端（即浏览器）中保存，不会自动把数据发给服务器，仅在本地保存	仅在客户端（即浏览器）中保存，不会自动把数据发给服务器，仅在本地保存
作用域	cookie在所有同源窗口中都是共享的	localStorage 在所有同源窗口中都是共享的	sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面

 

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

页面中一般的 js 对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。

而sessionStorage 只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或重新加载，数据仍然存在。

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

其实数据既可以在浏览器本地存储，也可以在服务器端存储。

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

服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。

1.服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。

2.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。

服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。

浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。

服务器存储数据安全一些，浏览器只适合存储一般数据。