cookie、localStorage 和 sessionStorage

120 阅读4分钟

image.png

cookie:

       cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术。简言之,cookie是服务器端发给客户端的文本文件;目的是用于辨别用户身份。

 

cookie保存在浏览器端;

单个cookie保存的数据不能超过4kb;

cookie只能保存字符串类型,以文本的方式;

应用场景:

(1)判断用户是否登录过网站,以便下次登录时能够实现自动登录(或者记住密码)。

(2)保存上次登录的事件等信息。

(3)保存上次查看的页面

(4)浏览计数

session

       当服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含sessionid。如果有sessionid,服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid,服务器会创建新的session对象,并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端,在交互中浏览器按照规则将sessionid发送给服务器。

 

session保存在服务器端;

session大小没有限制;

session通过类似与Hashtable的数据结构来保存,能支持任何类型的对象(session中可含有多个对象);

session的安全性大于cookie;

 

应用场景:

(1)网上商城中的购物车

(2)保存用户登录信息

(3)将某些数据放入session中,供同一用户的不同页面使用

(4)防止用户非法登录

WebStorage

WebStorage的目的是克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。

WebStorage两个主要目标:

1.提供一种在cookie之外存储会话数据的路径
2.提供一种存储大量可以跨会话存在的数据的机制

因此HTML5的WebStorage提供了两种API:localStorage(本地存储)sessionStorage(会话存储) localStorage (本地存储)

localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。

 

localStorage和sessionStorage都保存在客户端,不与服务器进行交互通信;

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

获取方式:localStorage:window.localStorage;

应用场景:localStorage常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据

 

sessionStorage (会话存储)

sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。

localStorage和sessionStorage都保存在客户端,不与服务器进行交互通信;

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

获取方式:sessionStorage:window.sessionStorage;

应用场景:sessionStorage:敏感账号一次性登录

\

 

WebStorage的优点

(1)存储空间更大:cookie为4KB,而WebStorage是5MB

(2)节省网络流量:WebStorage不会传送到服务器,存储在本地的数据可以直接获取,也不会像cookie一样每次请求都会传送到服务器,所以减少了客户端和服务端的交互,节省了网络流量

(3)对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据,sessionStorage会非常方便

(4)快速显示:有的数据存储在WebStorage上再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多,所以速度更快

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

(6)WebStorage提供了一些方法,数据操作比cookie方便

setItem(key, value) —— 保存数据,以键值对的方式存储信息

getItem(key) —— 获取数据,将键值传入,即可获取到对应的value值

removeItem(key) —— 删除单个数据,根据键值移除对应的信息

clear() —— 删除所有的数据

key(index) —— 获取某个索引的key