javascript存储 --- session cookie localStorage sessionStorage

2024年5月7日 155次阅读 来源: 镰月

session, cookie, sessionStorage, localStorage

浏览器的缓存机制提供了可以将用户数据存储在客户端，可以利用 cookie, session 等跟服务端进行数据交互

  1. cookie 俗称为甜点 是作为缓存数据存储与客户端(浏览器端),
    Cookie 是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它, 服务器首次在响应头信息中将cookie发送给客户端, 此后客户端每次访问服务器的时候都会带上这个 cookie;
    曾经有一个比较有意思的例子可以很好的解释cookie, cookie 就好比你去电视机专卖店买了一部电视机, 当每次坏了的时候 你必须带上你的电视机去专卖店修理, 因为专卖店指挥认识特有标志的电视机而不会认识人
  2. session
    cookie 可以认为是特殊的 cookie , 我们可以接着上一个例子, 上个例子专卖店只认特定的电视机, 而session就相当于你在专卖店注册了一张会员卡, 当你去专卖店的时候专卖店看到你手上的会员卡, 根据会员卡信息来确定顾客信息身份,

cookie和session最大的区别就是 cookie 的数据信息存储在客户端, 每次访问服务器客户端都会把信息发送给服务器来完成验证,浪费带宽, 而 session 则是把数据信息存储在服务器端, 每次访问服务器客户端指挥发送给服务器一个简单的标志信息, 服务器根据这个标志信息完成验证, 这样也就更加安全一些.

当然他们各自也有一定的优缺点

cook vs session

  1. 存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。
  2. 安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie

  3. 缺点：
    cookie：

    （1）大小受限
（2）用户可以操作（禁用）cookie，使功能受限
（3）安全性较低
（4）有些状态不可能保存在客户端。
（5）每次访问都要传送cookie给服务器，浪费带宽。
（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

    session:

    （1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全
（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

sessionStorage VS localStorage

自从HTML 5 标准出现之后，本地化存储一度成为热点。在HTML 5 最开始时，本地存储有两种方式：web Storage，web SQL。由于web SQL的实现是基于SQLite，更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。

  1. web Storage
    web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但它只是在本地存储, 两者都是仅在客户端（即浏览器）中保存，不参与和服务器的通信,其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：
    setItem (key, value) ——  保存数据，以键值对的方式储存信息。
    getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。
    removeItem (key) ——  删除单个数据，根据键值移除对应的信息。
    clear () ——  删除所有的数据
    key (index) —— 获取某个索引的key

作用域不同，

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面, 其只在

同源界面保存一次;localStorage 在所有同源窗口中都是共享的；

数据有效期不同，
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据

也就是说 sessionStorage是页面级别的,比较适合但页面应用, 而localStorage是浏览器级别的

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