清理localstorage_关于Cookie、Session、LocalStorage、Cache-Control（摘录）
一、發生了什么？
1、用戶打開注冊頁面，提交信息（登錄名、密碼……）后，客戶端獲取用戶輸入的信息保存到hash表里，并發送post請求路由為/sign_up給服務器
2、服務器判斷路由后進行接受數據（字符串）并將字符串轉化為對象處理，保存到數據庫（一個文件里），并告知用戶注冊成功了（后端設置返回響應，前端根據響應內容來呈現頁面給用戶）
3、用戶打開登錄頁面，提交信息（登錄名、密碼……）發送post請求路由為/sign_in給服務器
4、服務器判斷這次的提交信息（登錄名、密碼……）在不在數據庫里。如果不在，那么告知用戶去注冊一個。如果在那么就將SessionID（隨機數）通過cookie發給客戶端。每一個SessionID對應了一個用戶的信息，但返回的cookie是一個隨機數，因為隨機數可以提高保密度。
5、客戶端再次訪問服務器時，就會給帶上這個cookie，發送get請求給服務器。服務器讀取SessionID。
6、服務器通過SessionID找到對應用戶的隱私信息，然后進行判斷。如果確定是同一個用戶，那么響應一個新的html文件（登錄后的頁面）給客戶端
那么……
二、關于Cookie
Cookie是什么？舉個例子：小明（瀏覽器）第一次去公園（服務器）的時候，公園給了小明一張票（Cookie，包含了小明的信息）并告訴小明2天內（Cookie的有效時間）帶著這個票可以免費的進出，次數不限。所以小明在這段時間內，每次去公園都得帶上票。
1、Cookie的特點：
- 服務器通過 Set-Cookie 響應頭設置 Cookie
- 瀏覽器得到 Cookie 之后，每次訪問相同域名的網頁時都要帶上 Cookie
- 服務器讀取 Cookie 就知道登錄用戶的信息（email）
- 大小在 4kb 以內
2、在A瀏覽器登錄得到的Cookie，會在B瀏覽器帶上A瀏覽器的Cookie嗎？
NO
3、Cookie 存在哪里？
存在 C 盤的一個文件里
4、Cookie會被用戶篡改嗎？
可以，但 Session 來解決這個問題，防止用戶篡改
5、Cookie 有效期嗎？
默認有效期20分鐘左右，不同瀏覽器策略不同。后端可以強制設置有效期，具體語法看 MDN：
HTTP cookies?developer.mozilla.org6、Cookie 遵守同源策略嗎？
也有，不過跟 AJAX 的同源策略稍微有些不同：
- 當請求 qq.com 下的資源時，瀏覽器會默認帶上 qq.com 對應的 Cookie，不會帶上 baidu.com 對應的 Cookie
- 當請求 v.qq.com 下的資源時，瀏覽器不僅會帶上 v.qq.com 的Cookie，還會帶上 qq.com 的 Cookie
既然如此，那為什么要設置Session?
因為用戶可以修改Cookie,那么就可以用別人的身份發送請求獲取響應……
二、關于Session
Session是什么？繼續剛剛的例子：由于其他人可以修改票的信息拿著這張票進公園，所以公園（服務器）把所有人的信息儲存在一個本子里（內存），并給每一個人的信息設置對應的隨機數字（SessionID）作為票（Cookie）給用戶。那么小明拿到的票就不是自己的信息而是一串隨機數。當進小明再次公園的時候，公園就會核對這串隨機數與本子上記錄隨機數進行核對。如果準確就可以進去了。
所以Session就是：
- 將 SessionID（隨機數，保密性強）通過 Cookie 發給客戶端
- 客戶端訪問服務器時，服務器讀取 SessionID
- 服務器有一塊內存（哈希表）保存了所有 session
- 通過 SessionID 我們可以得到對應用戶的隱私信息，如 id、email
- 這塊內存（哈希表）就是服務器上的所有 session
三、關于LocalStorage&SessionStorage
1、LocalStorage：
- LocalStorage 跟 HTTP 無關
- HTTP 不會帶上 LocalStorage 的值
- 只有相同域名的頁面才能互相讀取 LocalStorage（沒有同源那么嚴格）
- 每個域名 LocalStorage 最大存儲量為 5Mb 左右（每個瀏覽器不一樣）
- 常用場景：記錄有沒有提示過用戶（沒有用的信息，不能記錄密碼）
- LocalStorage 永久有效，除非用戶清理緩存
LocalStorage的三個API：
localStorage.setItem（key,value） // 創建一個hash localStorage.getItem（key） //得到對應的value localStorage.clear() //清空應用場景（用戶第一次登錄網頁會提示“網頁即將改版”，第二次登錄就不會提示了）
let already = localStorage.getItem('已經提示過了') if（！already）{alert('網頁即將改版了')localStorage.setItem('已經提示過了',true) }2、SessionStorage（會話存儲）：
- SessionStorage 跟 HTTP 無關
- HTTP 不會帶上 SessionStorage 的值
- 只有相同域名的頁面才能互相讀取 SessionStorage （沒有同源那么嚴格）
- 每個域名 SessionStorage 最大存儲量為 5Mb 左右（每個瀏覽器不一樣）
- SessionStorage 在用戶關閉頁面（會話結束）后就失效。
四、Cache-Control（緩存控制）&Expires&ETag
1、Cache-Control是對HTTP進行緩存優化的
如果想給哪個請求設置緩存，就在服務器給相關請求返回的文件設置以下代碼：
response.setHeader（‘Cache-Control’,‘max-age=30’）//對某個文件設置30秒內緩存舉了例子：
- 當Chrome瀏覽器第一次向服務器發送了一個路徑為/main.js的請求
- 服務器響應一個xxx文本，瀏覽器下載了這個文本并保存在內存中
- 在30秒內Chrome瀏覽器輸入同樣的URL，內存返回了該文本
- 30秒之后Chrome瀏覽器第三發發送請求，服務器響應文本，瀏覽器下載并保存這個文本你在內存中
- ……
2、Cache-Control設置了時間，如何更新緩存？
首頁不能設置Cache-Control，因為瀏覽器不允許，因為用戶刷新后根本就不會向服務器發送任何請求。
一般其他會設置1-10年，如果中途發生改變可以更改文件請求的URL，只要URL變了就會發送新的請求。
3、Cache-Control與Expires的區別？
Cache-Control后面的時間是緩存多長時間
response.setHeader（‘Cache-Control’,‘max-age=30’）Expires的后面幾分幾秒過期指的是本地時間，如果本地時間錯亂了……
response.setHeader（‘Expires’,‘//GM的時間’）4、Cache-Control與ETag 的區別？
每一個文件都會有一個對應的md5（摘要算法），如果文件有一絲絲的變動md5的值就會相差很大。啥是md5，點連接查看。
https://zh.wikipedia.org/zh-hans/MD5?zh.wikipedia.org在1-copy.txt改了一個數字得出的結果那么使用ETag就會響應給客戶端一個md5，當客戶端下一次請求時會提交一個md5給服務器，服務器判斷進行判斷是否要響應一個文件給客戶端。如果不需要響應文件，那么返回一個304給客戶端。而Cache-Control是直接不請求。
304 有請求，有響應，但是響應沒有第四部分緩存沒有請求
五、幾個問題
1、Cookie 和 Session 的區別？
Session是基于Cookie實現的，因為Session 必須將 SessionID（隨機數）通過 Cookie 發給客戶端。瀏覽器得到 Cookie 之后，每次訪問相同域名的網頁時都要帶上 Cookie。
2、Cookie 和 LocalStorage 的區別？
客戶端每次訪問相同域名時會帶上cookie，最大容量4k。而LocalStorage跟HTTP無關，所以不會帶上LocalStorage的值，5Mb。
3、LocalStorage 和 SessionStorage 的區別？
LocalStorage 永久有效，除非用戶清理緩存。SessionStorage在用戶關閉頁面（會話存儲）后就失效了。
4、Cookie 如何設置過期時間？如何刪除 Cookie？
Cookie設置過期時間：
- Expires指定了一個日期/時間， 在這個日期/時間之后 Cookie 過期
- max-age指定了一個秒數，經過此秒數后 Cookie 過期
- 如果不設置這個標頭，則默認關閉瀏覽器后 Cookie 過期
Cookie 的刪除有不同方式：
- 服務器端可以通過設置 Expires、max-age 兩個標簽將 Cookie 設置為過期狀態
- JavaScript 可以通過document.cookie API 刪除 Cookie
5、Cache-Control: max-age=1000 緩存 與 ETag 的「緩存」有什么區別？
使用ETag就會響應給客戶端一個md5，當客戶端下一次請求時會提交一個md5給服務器，服務器判斷進行判斷是否要響應第四部分內容給客戶端。如果不需要響應第四部分內容，那么返回一個304給客戶端。而Cache-Control是在一段時間直接不請求。
總結
以上是生活随笔為你收集整理的清理localstorage_关于Cookie、Session、LocalStorage、Cache-Control（摘录）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux的vim多选择,真的有（很多）
- 下一篇： animation css逐渐消除,cs