cookie存储和localstorage存储以及sessionstorage存储

一：cookie存储和localstorage存储以及sessionstorage存储的定义理解

浏览器中cookie ,localstorage,sessionstorage,webstorage都是在浏览器客户端临时存储数据的容器，所谓的客户端就是我们自己的本地电脑。webstorage是HTML5提供的一种本地存储技术，存储在客户端，包括localStorage和sessionStorage

cookie：HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储，是网站为了识别用户和跟踪会话而存储在客户端计算机系统的文本数据, 是保存在客户端的纯文本文件，如txt文件。主要存储用户不敏感的文本信息，一般默认是浏览器关闭失效, 有自己的过期时间，一旦超时浏览器会自动清除cookie， cookie的使用受到浏览器软件的限制，如存储大小、存储数量等等

localstorage：是客户端文件系统/硬盘中存储客户端与服务器间的访问数据--都是key-value对形式，用于持久化的本地存储。除非主动删除数据，否则永远也不会过期，存放数据大小为一般为5MB，即使关闭浏览器，甚至关闭计算机仍然存在。

sessionstorage：用于本地存储一个会话(session)当中的数据，这些数据在同一个会话当中的页面都可以访问，所谓会话，就是用户打开浏览器软件访问了某个网站开始，一直到用户使用完毕后完全关闭浏览器，会话结束! 当会话结束之后数据会跟着销毁，sessionStorage在关闭页面或浏览器后被清除，也就是讲一个页面上的sessionStorage在页面刷新或者恢复页面的时候都不会丢失或者被清空，但是在页面会话结束时会被清除，存储seeionstorage中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可用，存放数据大小为一般为5MB

---

 二：cookie存储和localstorage存储以及sessionstorage存储的区别和共同点

区别：

1，与服务器之间的通信：

cookie在浏览器与服务器之间来回传递，每次都会携带在HTTP头中，作用是与服务器进行交互，作为http规范的一部分而存在的，如果使用cookie保存过多数据会带来性能问题

localstorage和sessionstorage不参与和服务器间的通信，不会把数据发给服务器，仅在本地保存，存储在本地的数据可以直接获取 ，web Storage仅仅是为了在本地“存储”数据而生

2，作用域的不同：

localStorage在所有同源窗口中都是共享的，同浏览器无法共享local和session的信息，同浏览器下，local可以在不同页面 (指的是相同域名和端口的下的不同页面) 共享相同的local数据，

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面，不同页面或标签页间无法共享sessionStorage的信息，需要注意页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的

cookie也是在所有同源窗口中都是共享的，cookie在不设置过期时间的前提下，只在当前的会话有效，

3，存储大小：

cookie存储大小为4k

localStorage和sessionStorage的存储数据大小一般都是：5MB

4，存储内容类型：

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上

5，应用场景：

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据

sessionStorage：敏感账号一次性登录

cookie的作用：主要用于保存登录信息，设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中                                                                            

6，获取速度：local和session存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快，cookie每次请求都会传送到服务器，数据获取交互相对慢些

7，安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题

8，失效时间：

cookie：一般默认是浏览器关闭失效,cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失，这种生命期为浏览器会话期的cookie被称为会话，cookie可以自己设置失效时间,设置时间后只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭也不会影响。

localstorage：永久有效，除非主动删除数据，否则永远也不会过期

sessionstorage：当前会话有效，在关闭页面或浏览器后被清除,sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭，sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念，sessionStorage是在同源的同窗口中，始终存在的数据，也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在，关闭窗口后，sessionStorage就会被销毁，同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的

9：存储方法的调用

web storage拥有setItem,getItem,removeItem,clear等方法

cookie需要前端开发者自己封装setCookie，getCookie
 

相同点：

1，都是保存在浏览器端、且同源的