一、localStorage 跟 sessionStorage有什么不同？？？？

localStorage

1、生命周期：localStorage的生命周期是永久的，關(guān)閉頁(yè)面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會(huì)消失。localStorage除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失。

2、儲(chǔ)存大小： 5MB

3、獲取方式：localStorage.getItem(“key”)

4、應(yīng)用場(chǎng)景：常用于長(zhǎng)期登錄（+判斷用戶是否已登錄），適合長(zhǎng)期保存在本地的數(shù)據(jù)。

sessionStorage

1、sessionStorage的生命周期是僅在當(dāng)前會(huì)話下有效。sessionStorage引入了一個(gè)“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)。

1.1、只要這個(gè)瀏覽器窗口沒有關(guān)閉，刷新、進(jìn)入同源另一個(gè)頁(yè)面，數(shù)據(jù)依然存在。
（同源：指"協(xié)議+域名+端口"三者相同,即便兩個(gè)不同的域名指向同一個(gè)ip地址,也非同源。 當(dāng)協(xié)議、子域名、主域名、端口號(hào)中任意一個(gè)不相同時(shí),都算作不同域。不同域之間相互請(qǐng)求資源,就算作“跨域”。）
（同源另一個(gè)頁(yè)面：指 當(dāng)前《頁(yè)面1》為 localhost:8080,此時(shí)還沒有存sessionStorage，再次打開一個(gè)《頁(yè)面2》localhost:8080，《頁(yè)面1》此時(shí)登錄，sessionStorage.setItem 存儲(chǔ)之后在《頁(yè)面2》可以查看到存儲(chǔ)信息，如果這時(shí)再打開《頁(yè)面3》不會(huì)有存儲(chǔ)的信息 ）

1.2、但是 sessionStorage 在關(guān)閉了瀏覽器窗口后就會(huì)被銷毀。同時(shí)獨(dú)立的打開同一個(gè)窗口同一個(gè)頁(yè)面，sessionStorage也是不一樣的。
《頁(yè)面1》關(guān)閉，不會(huì)影響《頁(yè)面2》的存儲(chǔ)信息，如果重新打開《頁(yè)面1》，sessionStorage存儲(chǔ)的信息也被銷毀

2、儲(chǔ)存大小： 5MB

3、獲取方式：sessionStorage.getItem(“key”)

4、應(yīng)用場(chǎng)景：敏感賬號(hào)一次性登錄；

存在的問題：

“移動(dòng)端sessionStorage緩存失效”，沒錯(cuò)，就是概念沒理解透，導(dǎo)致在App里面獲取后為null，在PC端是正常的。

因?yàn)閟essionStorage的生命周期是僅在當(dāng)前會(huì)話下有效，移動(dòng)端切換頁(yè)面是關(guān)閉原頁(yè)面打開新頁(yè)面，知道sessionStorage特性的朋友看到這里是不是瞬間理解了？

解決方案，我們知道sessionStorage被清空的原因是：移動(dòng)端切換頁(yè)面是關(guān)閉原頁(yè)面打開新頁(yè)面，因此，在做移動(dòng)端的時(shí)候，可以采用localStorage保存數(shù)據(jù)，使用完后再清空l(shuí)ocalStorage。

當(dāng)然，如果是在同一個(gè)頁(yè)面中，sessionStorage的使用是沒有任何問題的。

二、session和cookie的區(qū)別是什么？？

1、https://worktile.com/kb/p/38734
2、B站視頻：B站終于有人將Session和cookie講明白了！一節(jié)課徹底搞懂

Web3.0, 從1.0到3.0你不知道的互聯(lián)網(wǎng)的演進(jìn)史！

https://cloud.tencent.com/developer/article/1419229

Session 、Cookie和Token三者的關(guān)系和區(qū)別

參考鏈接：

session的使用

https://www.cnblogs.com/lihuidu/p/6495247.html

sessionID相當(dāng)于一個(gè)文件名稱， 里面存放的是

cookie的使用

1、cookie準(zhǔn)備工作 前端頁(yè)面（端口 8080）

<template><div class="login"><h3>我在登錄頁(yè)面</h3><el-button v-if="isLoginFlag" @click="handleIsLogin('1')">我是免登錄，我想直接跳轉(zhuǎn)《結(jié)算頁(yè)面》</el-button><el-button v-if="isLoginFlag" @click="handleIsLogin('2')">我是免登錄，我想直接跳轉(zhuǎn)《詳情頁(yè)面》</el-button><div v-if="isLoginFlag">我已經(jīng)登錄過了，現(xiàn)在有保存的cookie，可免登錄</div><el-form v-else :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="用戶信息" prop="userInfo"><el-input v-model="ruleForm.userInfo" autocomplete="off"></el-input></el-form-item><el-form-item label="密碼" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">登錄</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</template><script>
import axios from 'axios'
export default {name: 'login',data() {var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('請(qǐng)?jiān)俅屋斎朊艽a'));} else if (value !== this.ruleForm.pass) {callback(new Error('兩次輸入密碼不一致!'));} else {callback();}};return {isLoginFlag: false,ruleForm: {pass: '',userInfo: '',},rules: {pass: [{ required: true, validator: validatePass, trigger: 'blur' }],userInfo: [{ required: true, message: '請(qǐng)輸入用戶信息', trigger: 'blur' }],}};},created() {console.log('login-created')this.getUserInfo()},mounted() {console.log('login-mounted')},methods: {handleIsLogin(type) {if (type === '1') {this.$router.push({path: 'settlement',})} else {this.$router.push({path: 'details',})}},getCookieItem (sKey) {return (decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" +encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") +"\\s*\\=\\s*([^;]*).*$)|^.*$",),"$1",),) || null);},getUserInfo() {axios.get('http://localhost:3000/userInfo').then( res => {console.log('userInfo-54-->', res)// console.log('323', this.getCookieItem('tokenId'))document.cookie.split(';').forEach(item => {if (item.includes('tokenId')) {const pageToken = item.split('=')console.log('item=->', pageToken)if (pageToken.length > 0) {// 我登錄了，不需要展示賬號(hào)密碼this.isLoginFlag = true} else {// 我的登錄狀態(tài)消失，需要輸入賬號(hào)密碼this.isLoginFlag = false}this.setStroageUserInfo(pageToken)// console.log()// 為什么要用 localstroage 存儲(chǔ)（sessionStroage），因?yàn)槭褂?store頁(yè)面刷新就消失，跨頁(yè)面我沒法保存，初始化當(dāng)前頁(yè)面，保存的 cookie也會(huì)清空// 下次需要做的：// 怎么取cookie, document.cookie可以在這里獲取，// 1、使用 localstroage 存儲(chǔ)token// 2、研究 session// 3、cookie 相當(dāng)于卡包，可以存多個(gè)key-value， Cookie不僅僅有名字和值兩個(gè)屬性，還有域（domain），過期時(shí)間（expires），路徑（path）等屬性。 其中，不同的域、不同的路徑下可以存在同樣名字的cookie。// 4、加油}})})},setStroageUserInfo(pageTokens) {console.log('123')if (pageTokens && pageTokens.length > 0) {console.log('2344')const token = pageTokens[0]localStorage.setItem('gzm-test-localStorage', 'gzm-localStorage-token')sessionStorage.setItem('gzm-test-sessionStorage', 'gzm-sessionStorage-token')}},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {axios({method: 'post',withCredentials: true, //只要添加withCredentials，請(qǐng)求的接口就報(bào) CORS錯(cuò)誤，url: 'http://localhost:3000/login',data: this.ruleForm}).then( res => {console.log('login-54-->', res)this.$router.push({path: 'details',})this.$message({showClose: true,message: '登錄成功',type: 'success'});})} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}
}
</script><style></style>

vue.config.js 配置

module.exports = {devServer: {host: '0.0.0.0',port: 8080,https: false,open: true,// vue項(xiàng)目啟動(dòng)時(shí)自動(dòng)打開瀏覽器proxy: {'/api': { // '/api'是代理標(biāo)識(shí)，用于告訴node，url前面是/api的就是使用代理的target: "http://localhost:3000", //目標(biāo)地址，一般是指后臺(tái)服務(wù)器地址changeOrigin: true, //是否跨域pathRewrite: { // pathRewrite 的作用是把實(shí)際Request Url中的'/api'用""代替'^/api': "" }}}}
}

2、express搭建服務(wù)器（端口3000）

const express = require('express');
const fs = require('fs');
const app = express();
const port = 3000;
const path = require('path');// 遇到的問題：1、使用axios請(qǐng)求express接口，code碼返回 CORS 錯(cuò)誤，服務(wù)器接口需要配置請(qǐng)求頭，允許跨域
app.all("*",(req,res,next)=>{console.log('req--->', req.headers)// 遇到的問題：坑1、使用以下請(qǐng)求頭，set-cookie之后，瀏覽器中的cookie中沒有剛剛保存的cookie// 允許任何請(qǐng)求地址訪問// res.setHeader("Access-Control-Allow-Origin", "*")// // 允許任何請(qǐng)求攜帶自定義數(shù)據(jù)訪問// res.setHeader("Access-Control-Allow-Headers", "*")// 參考地址：https://blog.csdn.net/qq_54074878/article/details/125396455//解決坑 1 問題、res.header("Access-Control-Allow-Origin",req.headers.origin);//允許跨域的域名res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");//允許跨域的請(qǐng)求方法res.header('Access-Control-Allow-Credentials', 'true');//Credentials 證書;憑證;證明;證件;文憑 允許攜帶cookie，設(shè)置這個(gè)的話上一條的設(shè)置不能為'*'res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");//允許的請(qǐng)求頭部next()
})app.post('/login', (req,res) => { const data = fs.readFileSync('./HTTPInterface/login.json')res.setHeader('set-cookie', ['tokenId=FJOSDAFUEWOMRAKEFJSD343242DJOISFJSDFL;path=/;max-age=60;'])// 遇到的問題： 3、返回的數(shù)據(jù)亂碼，可以添加請(qǐng)求頭res.setHeader('Content-type', 'application/x-www-form-urlencoded')// setTimeout(() => {res.end(data);// },2000)
})app.get('/userInfo', (req,res) => { console.log('res-->', res)const data = fs.readFileSync('./HTTPInterface/userInfo.json')// 遇到的問題： 3、返回的數(shù)據(jù)亂碼，可以添加請(qǐng)求頭res.setHeader('Content-type', 'application/json')// setTimeout(() => {res.end(data);// },2000)
})app.listen(port,() => {console.log(`Example app listening at http://localhost:${port})`)
})

參考文章：

https://www.freecodecamp.org/chinese/news/everything-you-need-to-know-about-cookies-for-web-development/

參考視頻：

B站終于有人將Session和cookie講明白了！一節(jié)課徹底搞懂
https://www.bilibili.com/video/BV1qu411Z745/?spm_id_from=333.337.search-card.all.click&vd_source=f069debb88bbe421f4c5b68e242f9165

cookie 是什么

Cookie 是一個(gè) HTTP 請(qǐng)求標(biāo)頭，其中含有先前由服務(wù)器通過 Set-Cookie 標(biāo)頭投放或通過 JavaScript 的 Document.cookie 方法設(shè)置，然后存儲(chǔ)到客戶端的 HTTP cookie 。

這個(gè)標(biāo)頭是可選的，而且可能會(huì)被忽略，例如在瀏覽器的隱私設(shè)置里面設(shè)置為禁用 cookie。

為什么項(xiàng)目中要使用cookie，解決了什么問題

http是無(wú)狀態(tài)協(xié)議，不會(huì)保存用戶的登錄信息，例如需求中需要購(gòu)物，跳轉(zhuǎn)到購(gòu)物車/結(jié)算頁(yè)面，沒有用戶登錄信息，這時(shí)候解決方案就是 cookie，瀏覽器登錄之后，服務(wù)器接受到，將cookie信息返回，并保存到頁(yè)面， 可以設(shè)置cookie的有效期

1、cookie 是服務(wù)器生成,服務(wù)器可通過set-cookie設(shè)置cookie，
2、也可以在通過接口返回，比如接口詳情信息中有cookie的標(biāo)識(shí)
3、cookie 需要設(shè)置有效期，瀏覽器是否保存cookie是它的事

最后要合理使用cookie

cookie 中遇到哪些問題

問題一：跨域問題， 當(dāng)本地開發(fā)服務(wù)器是http://localhost:8080,
訪問的服務(wù)器地址是 http://localhost:300, 端口不同，產(chǎn)生跨域問題，

如何解決：首先頁(yè)面接口會(huì)報(bào)一個(gè)錯(cuò),參考圖片 CORS.png
解決方案： 在axios中配置參數(shù) withCredentials: true, 然后在 后端配置響應(yīng)頭 res.header(‘Access-Control-Allow-Credentials’, ‘true’);//Credentials 證書;憑證;證明;證件;文憑

問題二：如何返回json文件內(nèi)容，
解決：通過fs.readFileSync,獲取到文件
const data = fs.readFileSync(‘./HTTPInterface/login.json’)

問題三：后端使用express，設(shè)置set-cookie，注意 max-age=60（單位是秒）
res.setHeader(‘set-cookie’, [‘tokenId=FJOSDAFUEWOMRAKEFJSD343242DJOISFJSDFL;path=/;max-age=60;’])

cookie 中優(yōu)勢(shì)是什么

面試題 – 1、跨域請(qǐng)求如何攜帶cookie?

思考：？？？
參考文章：
https://juejin.cn/post/7066420545327218725

coocie為什么會(huì)跨域？ 頁(yè)面的服務(wù)器地址是：localhost:8080， 服務(wù)器地址是 localhost:3000, 當(dāng)使用8080頁(yè)面訪問服務(wù)器登陸接口，就產(chǎn)生了跨域，此時(shí)有兩個(gè)解決辦法
參考文章：
https://www.cnblogs.com/imgss/p/cors.html

面試題 – 2、Cookie為什么會(huì)越來(lái)越大？

思考：？？？
因?yàn)閏ookie就像一個(gè)卡包，可以存放多個(gè)cookie，通一個(gè)頁(yè)面可以創(chuàng)建多個(gè)cookie，過期時(shí)間跟設(shè)置的max-age有關(guān)

參考文章
https://juejin.cn/post/6844904113428234247

面試題 – 3、面試：徹底理解Cookie以及Cookie安全

思考：？？？
參考文章
https://juejin.cn/post/6844904102544031757?searchId=2023101220013497B9D88B9A81E66FAEB1

參考文章：
防止：CSRF攻擊，舉例

遇到哪些問題？？？

遇到的問題：1、使用axios請(qǐng)求express接口，code碼返回 CORS 錯(cuò)誤，服務(wù)器接口需要配置請(qǐng)求頭，允許跨域

如何解決：首先頁(yè)面接口會(huì)報(bào)一個(gè)錯(cuò),參考圖片 CORS.png
解決方案： 在axios中配置參數(shù) withCredentials: true, 然后在 后端配置響應(yīng)頭 res.header(‘Access-Control-Allow-Credentials’, ‘true’);//Credentials 證書;憑證;證明;證件;文憑

遇到的問題：2、javascript模塊中不能直接引入 const axios = require(‘a(chǎn)xios’)

因?yàn)樾枰尤雡ebpack模塊化，要不然不認(rèn)識(shí)
避開方案：可以使用 csdn 引入axios

遇到的問題：3、express如何設(shè)置 set-cookie

解決方案：
res.setHeader(‘set-cookie’, [‘token=fasdjfla;path=/;max-age=60*1000’])

遇到的問題：4、瀏覽器 http://localhost:8080 ,請(qǐng)求服務(wù)器 http://localhost:3000 登錄接口，服務(wù)器 set-cookie，在瀏覽器不生效

解決方案：
因?yàn)闉g覽器在控制欄勾選了 「停用緩存」，所以導(dǎo)致cookie不會(huì)生效。

參考鏈接：https://blog.csdn.net/qq_54074878/article/details/125396455

問題5、設(shè)置max-age不生效，注意格式為 max-age，不是maxAge

解決：max-age=12000,直接設(shè)置某個(gè)值，不要用乘法
12 * 6000，因?yàn)檎?qǐng)求頭不會(huì)識(shí)別

問題6、服務(wù)器設(shè)置set-cookie，設(shè)置相同的path，請(qǐng)求頭不會(huì)攜帶cookie

解答：瀏覽器不會(huì)自己攜帶cookie，需要用特殊的工具，或者前端自己關(guān)聯(lián) cookie，使用localstroage存儲(chǔ)，
https://blog.csdn.net/HQqHQhqqhq/article/details/125906604

問題7、Cookie不僅僅有名字和值兩個(gè)屬性，還有域（domain），過期時(shí)間（expires），路徑（path）等屬性。 其中，不同的域、不同的路徑下可以存在同樣名字的cookie。

https://blog.csdn.net/z591102/article/details/107244500