Cookie、LocalStorage、SessionStorage的异同

Cookie、LocalStorage、SessionStorage的异同

基本概念

• Cookie 的大小限制为4kb左右，主要作用是保存登录信息，比如登录某个网站时候看到“记住密码”，一般都是通过在 Cookie 中存入一段辨别用户身份的数据来实现的
• LocalStorage 和 sessionStorage 都是 HTML5 标准中新加入的技术，主要用来做本地存储，但是二者保存数据的生命周期不同
• Session 是“会话”的意思，sessionStorage 只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在，但当页面关闭后，sessionStorage 中的数据就会被清空。而 LocalStorage 存储的数据除非被清除，否者永远存在本地

Cookie与Session的区别

• cookie数据存放在浏览器中，session数据存放在服务器上
• cookie是不安全的，别人可以分析存放在本地的cookie并进行cookie诈骗，考虑到安全性能，应尽量使用session
• session会在一定时间内保存在服务器上。当访问增多时，会比较占用服务器的性能。考虑到服务性能，应尽量使用cookie
• 单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie

cookie和session都用来存储用户信息，cookie存放于客户端有可能被窃取，所以cookie一般用来存放不敏感的信息，比如用户设置的网站主题，敏感的信息用session存储，比如用户的登录信息

Cookie、LocalStorage、SessionStorage的异同

• HTML5中提出了webStorage的概念，webStorage包括sessionStorage和localStorage，只为了保存数据，不会与服务器进行通信
• cookie,localStorage,sessionStorage都是在客户端保存数据，存储数据的类型：字符串
• webStorage不会随着HTTP header发送到服务器端，所以安全性相对来说比cookie高，不必担心截获
• 生命周期不同（见后文），localStorage要手动清除，sessionStorage在浏览器关闭后清除

LocalStorage与SessionStorage的API

xxxxxStorage.setItem('key',value)
// 接收一个键和值作为参数，把键值对添加到存储中
// 如果键名存在，则更新其对应的值。

xxxxxStorage.getItem('key')
// 接收一个键名作为参数，返回键名对应的值

xxxxxStorage.removeItem('key')
// 接收一个键名作为参数，并把该键名从存储中删除

xxxxxStorage.clear()
// 清空存储中的所有数据

// 注意：只能存储字符串，不能存储对象、JSON等其他数据格式

// 存储对象时，需要通过JSON.stringify()将对象转化为字符串
localStorage.setItem(key,JSON.stringify(data))
// 取出对象时，需要通过JSON.parse()将字符串转化为对象
JSON.parse(localStorage.getItem(key))

应用场景

• 因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简，比较常用的一个应用场景就是判断用户是否登录。
• 针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦
• Localstorage常用于长期登录，适合长期保存在本地的数据，比如用户信息
• Sessionstorage常用于敏感账号一次性登陆，如关闭当前页面再次打开页面就要重新登陆