sessionStorage，localStorie，cookie的使用选择

向右看齐 2021-09-07 06:09 264阅读 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 来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以 保存上一次访问的界面风格。