当前位置: 代码迷 >> 综合 >> sessionStorage,localStorie,cookie的使用选择
  详细解决方案

sessionStorage,localStorie,cookie的使用选择

热度:75   发布时间:2023-12-28 02:14:06.0

sessionStorage,localStorage,cookie 虽然用的多,但是我现在也遇到一些问题

  • 如果登录状态,同一标签下共享数据,把网址复制粘贴到新打开的标签页里,依旧可以打开(sessionStorage不满足)

  • 如果登录的时候选了十天免登陆,那我十天之后,怎么清除账号密码,(localStorage永久有效的,除非手动改清除,但是api并没有提供时间记录)

  • sessionStorage只能在同一标签下共享,把网址复制粘贴到新打开的标签页里面,你会惊喜的发现,what?居然不共享。这对于不同页面共享存储数据,就行不通

  • localStorage了,这个好处就是存储空间大,长时间保存,同一浏览器,标签页全部共享,它是直接存到电脑硬盘上的,不好的是,它是永久有效的,除非手动改清除。

建议使用cookie,cookie的生命周期和浏览器是一样的,浏览器关闭了cookie就销毁了。localStorage和sessionStrage两个是两个极端,一个删不掉,一个不能跨页面。cookie虽然只能存4kb,但也够了!

而且我还学到一个,内存的数据,关闭浏览器就没了。存在硬盘的数据,可以长久保存

所以面试的时候,人家问你,你们数据是怎么存储的,你知道该怎么回答了吧?

vuex和localStorage的区别

  • 区别:
    vuex: 状态管理,集中管理数据的仓库,vuex存储在内存中
    localStorage:是以文件的形式,存储在本地,locallStoeage只能存储
  • 应用场景
    vuex组件传值
    locallStorage页面传递数据
    -存储永久性
    刷新页面vuex的值会丢失,localStorage不会
  • 可替代性
    场景1 : 如果登录之后,需要用户名。那登录之后,就讲用户名存储在lacalStorage中,等进入详情页,再展示用户名。那这肯定是用localStorage。因为这是页面传值,如果存vuex,页面刷新,就没了…
    场景2: 如果在详情页,有修改用户名这个操作,那这就是存vuex,因为在详情页修改用户名之后,就得实时更新当前用户名,所以用vuex,并且将其存在locallStorage中,防止刷新丢失
  • 互补
    vuex+ localStorage
    或者使用插件vuex-persist

扩展:

补充说明一下 cookie 的作用:
保存用户登录状态
例如将用户 id 存储于一个 cookie 内,这样当用户下次访问该页面 时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。 cookie 还可以设置 过期时间,当超过时间期限后,cookie 就会自动消失。因此,系统往往可以提示用户保 持登录状态的时间:常见选项有一个月、三个 月、一年等。 跟踪用户行为。例如一个天气预报网站,能够根据用户选择的地区显示当地的天气情况。 如果每次都需要选择所在地是烦琐的,当利用了 cookie 后就会显得很人性化了,系统能 够记住上一次访问的地区,当下次再打开该页面时,它就会自动显示上次用户所在地区 的天气情况。因为一切都是在后 台完成,所以这样的页面就像为某个用户所定制的一
样,使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能,那么可以使 用 cookie 来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以 保存上一次访问的界面风格。

  相关解决方案