2月文章

source/_posts/由Vue项目的数据存储引发的系列问题！.md

+---
+title: 由Vue项目的数据存储引发的系列问题！           
+date: 2023/02/26 16:42:20
+tags:                    
+- 前端
+- Vue            
+author: 李燕         
+---
+
+### vuex存储与本地存储有哪些区别？
+
+在vue项目中，经常会用到vuex存储与本地存储（localstorage），现将它们的区别总结如下：
+
+<!-- more -->
+
+![image-20230207161507166.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45b29716275b429dae5e43354add8a65~tplv-k3u1fbpfcp-watermark.image?)
+
+### 本地存储可以代替Vuex存储吗？
+
+对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到。
+
+### Vuex存储的状态随着页面刷新而丢失了怎么办？
+
+因为Vuex是js工程，数据是存储在内存中，当进行浏览器刷新、回退、前进操作时，会让Vuex重新加载，致使Vuex里存储的状态值全部还原成初始值，一般解决思路如下：
+
+1.借助于localStorage或者sessionStroage来存放。
+
+2.日常开发中，遇到数据量大的时候，一般在页面刷新的时候再次请求远程数据，使之动态更新vuex数据。
+
+### api请求什么时候放在Vuex内，又什么时候放在组件内？
+
+多个组件使用到的api请求,可以放在vuex里，方便全局调用，只用一次的api请求，就直接放在本组件中即可。
+
+### vue项目中，为什么用vue.ls插件来代替直接使用localStorage Api?
+
+localStorage.setItem(key, String)，set的值必须是字符串，如果数据是对象都需要先行转换（JSON.stringify(xxx)）,取出时则需通过JSON.parse(xxx)转回对象。且localStorage设置存储失效时间比较麻烦。
+
+vue.ls用来控制数据存储在 localStorage 或者 sessionStorage 中，无需进行数据类型转换，还可以通过传参控制其存储时效性，并且可以统一规定缓存的key的前缀，避免当前系统缓存的key与其他系统缓存的key重复。总的来说，vue.ls比localStorage Api更简单易用。
+
+### sessionStorage、localStorage、cookie 有哪些异同？
+
+共同点：
+
+都是保存在浏览器端，且同源的。
+
+区别：
+
+1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
+
+2.cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
+
+3.存储大小限制也不同，cookie数据不能超过4k，默认各种浏览器都支持，缺陷就是每次请求，浏览器都会把本机存的cookie发送到服务器，无形中浪费带宽。所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
+
+4.数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
+
+5.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
+
+### 为什么选择Web Storage而不是Cookie？
+
+与Cookie相比，Web Storage具有以下优势：
+
+1.存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。
+
+2.存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送到服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互，从而减少挽网络浏览，更快速地显示数据。
+
+3.更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。
+
+4.独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
+
+### 浏览器本地存储与服务器端存储之间有哪些区别？
+
+1.服务器端可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
+
+2.浏览器端一般只用来存储小数据，服务器端可以存大数据或小数据，但因保存所有用户的数据，所以服务器端的开销较大。
+
+3.服务器存储数据安全一些，浏览器只适合存储一般数据。
\ No newline at end of file