详解Cookie,localStorage与seesionStorage

前言

  • 这些api的发展历程?
  • 这些api各自的优缺点是什么?
  • 这些api的使用场景?
  • 怎么用就不说了,因为直接看文档就可以了

参考了很多篇文章,现在把所看的内容总结一下。

发展历程

长久以来,本地存储能力一直是桌面应用区别于Web应用的一个主要优势。对于桌面应用,操作系统一般都提供了一个抽象层来帮助应用程序保存其本地数据。但遗憾的是,由于一些原因,在web的发展史上,在很长的一段时间里Cookie是唯一可以使用的在用户本地存储少量的数据的方法。一直随着现代浏览器开始支持各种各样的存储方式,Cookie的部分功能才渐渐被取代。

Cookie的优缺点

优点:

  • 可以方便的控制Cookie生命周期。
  • 持久性数据(Persistent data)。
  • 可以设置作用域。

缺点:

  • Cookie数量和长度受限制,数量部分不同的浏览器不一样,长度是不能超过4KB,否则会被截掉。
  • 浏览器的每次请求都会携带Cookie数据,会带来额外的性能开销,浪费带宽(尤其是在移动开发环境下)。
  • Cookie是以单字符串的形式保存在客户端的,所以利用原生js不利于操作。
  • Cookie更容易受到安全攻击。

localStorage的优缺点

优点:

  • 以键值对的形式进行存储,存储的是原始值,浏览器提供了更易操作的api。
  • 更大的存储空间,相同域最多可以存储5MB。
  • 不会在每个HTTP请求中被携带。
  • 遵循同源政策,保存数据会相对来说安全些。

缺点:

  • 不能直接控制生命周期,需要自己利用js进行封装之后才能操作。
  • 如果服务端需要客户端的存储信息,你需要手动添加它。

sessionStorage的优缺点

sessionStorage基本上和localStorage是相同的,同属于Web Storage,返回的也都是一个Storage对象。区别在于sessionStorage在关闭浏览器或者是当前标签页(有的人说关闭tab不清空,但是规范上有写,sessionStorage 是基于browsing context来呈现的)时,存储的数据都会被清空掉。

应用场景

Cookie因为它的实现特点,所以更多的是保存让服务端可以获得的数据,保存用户的个人的用户信息,让服务端知道当前用户是谁,如保存sessionId。而localStorage则是用来服务客户端的,可以保存主题设置,用户配置的一些信息。sessionStorage更多的是像对localStorage的一个补充,可以用来保存页面的会话信息。

参考文章

    原文作者:malloc
    原文地址: https://segmentfault.com/a/1190000014717552
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞