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 来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以 保存上一次访问的界面风格。