Cookie、LocalStorage、SessionStorage的异同

本文主要是介绍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))