Cookie,localStorage,SessionStorage区别与应用场景

Cookie,localStorage,SessionStorage区别与应用场景

Cookie是什么？

Cookie：存储在用户本地终端上的数据
Cookie直译为中文是小饼干，顾名思义，它的内存非常小，大小限制为4KB左右
每次http请求都会携带很小的Cookie

localStorage

是H5新增的技术
没有时间限制的数据存储，第二天，下一周,下一年，只要你不删除仍然存在

SessionStorage

针对一个session的数据存储，当用户关闭浏览器时，数据会被删除

三者区别

特性	Cookie	localStorage	sessionStorage
数据的生命周期	一般由服务器生成，可以自定义失效时间，如果由浏览器生成，则默认为浏览器关闭时失效	只要不删除，就会一直存在	仅在当前会话下，当你关闭网页或关闭浏览器时都会失效
存储的数据大小	一般为4KB	至多为5MB	至多为5MB
与服务器端的通信	每次都会携带在HTTP头中，一般Cookie中的数据不能保存过多，否则会影响性能问题	仅在客户端（浏览器）中进行保存，不参与和服务器的通信	仅在客户端（浏览器）中进行保存，不参与和服务器的通信
易用性	程序员自己封装，原生的Cookie接口并不友好	原生的接口可以接受，但是也可以自己封装，自己封装会对Object和Array更可用	原生的接口可以接受，但是也可以自己封装，自己封装会对Object和Array更可用
作用域	与所有同源窗口均共享	与所有同源窗口均共享	不在不同的浏览器窗口共享

应用场景

Cookie:

• 一般用于判断用户是否登录过网站，以便于下次登录时可以自动登录或记住密码，如果我们删除Cookie中的内容，则下次登录的时候需要重新填写相应的所有有关信息
• 保存上次登录的时间等信息
• 保存上次浏览过的页面
• 保存浏览次数

localStorage:

• 缓存静态文件内容的JS，CSS
• 缓存不常使用的API接口数据
• 存储地理位置

SessionStorage:

用于敏感账号的一次性登录，关闭当时页面再次打开页面时需要重新登录