【前端工程師手冊】總結一下前端存儲

array_huang 發布于2019-08-26 12:09 / 1174人閱讀

摘要：如果不指定，默認為當前文檔的主機不包含子域名。標識指定了主機下的哪些路徑可以接受該路徑必須存在于請求中。具體的使用參考教程和類似，但是可以直接使用來操作，具體的參看參考聊一聊前端存儲那些事兒聊一聊

cookie 為什么會有cookie

http協議的無狀態，所謂無狀態即是服務器并不是知道這次的請求和上次的請求是不是同一個client發來的，就好比你經常去一家超市買東西，老板并不記得你是誰。但是如果你每次帶著你的會員卡過來，那么老板就可以識別出你是誰了，cookie的作用類似于會員卡起的作用。

大概流程

當服務器收到HTTP請求時，服務器可以在響應頭里面添加一個Set-Cookie選項。瀏覽器收到響應后通常會保存下Cookie，之后對該服務器每一次請求中都通過Cookie請求頭部將Cookie信息發送給服務器。另外，Cookie的過期時間、域、路徑、有效期、適用站點都可以根據需要來指定。

當然了，瀏覽器端也可以操作cookie，document.cookie可以獲取當前頁面的所有cookie。

細節 domain、path

這兩個屬性決定了cookie是否會被發往哪些URL

Domain 標識指定了哪些主機可以接受Cookie。如果不指定，默認為當前文檔的主機（不包含子域名）。如果指定了Domain，則一般包含子域名。

例如，如果設置 Domain=mozilla.org，則Cookie也包含在子域名中（如developer.mozilla.org）。

Path 標識指定了主機下的哪些路徑可以接受Cookie（該URL路徑必須存在于請求URL中）。以字符 %x2F ("/") 作為路徑分隔符，子路徑也會被匹配。

例如domain=qq.com，path=/blog，則該cookie會被發往：

qq.com/blog

wx.qq.com/blog

wx.qq.com/blog/aa

....

expires、max-age

這兩個屬性決定了cookie在瀏覽器保存多久

具體的細節為：

Expires 為 Cookie 的刪除設置一個過期的日期

Max-age 設置一個 Cookie 將要過期的秒數

IE 瀏覽器(ie6、ie7 和 ie8) 不支持 max-age，所有的瀏覽器都支持 expires

如果同時設置了expires和max-age，那么支持max-age的瀏覽器會忽略expires的值，不支持max-age的瀏覽器會忽略max-age只支持expires

如果expires和max-age都不設置，該cookie會成為一個session cookie，即關閉瀏覽器的時候會被自動刪除

secure和httpOnly

標記為 Secure 的Cookie只應通過被HTTPS協議加密過的請求發送給服務端。但即便設置了 Secure 標記，敏感信息也不應該通過Cookie傳輸，因為Cookie有其固有的不安全性，Secure 標記也無法提供確實的安全保障。從 Chrome 52 和 Firefox 52 開始，不安全的站點（http:）無法使用Cookie的 Secure 標記

為避免跨域腳本 (XSS) 攻擊，通過JavaScript的 Document.cookie API無法訪問帶有 HttpOnly 標記的Cookie，它們只應該發送給服務端。如果包含服務端 Session 信息的 Cookie 不想被客戶端 JavaScript 腳本調用，那么就應該為其設置 HttpOnly 標記。

如何設置cookie 服務端

服務端set-cookie即可

如下圖是GitHub的設置cookie

瀏覽器

直接在JavaScript里操作即可：

document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=github.com; path=/";

如何修改cookie

修改一個cookie時，要保證name-domain-path一致，否則不會修改舊值，而是添加了一個新的 cookie。

如何刪除cookie

保證name-domain-path一致，并且把expires設置為一個過去的時間點

sessionStorage 使用

setItem(key, val);

getItem(key)

細節

只有設置sessionStorage的當前域才能使用

只有頁面刷新才不會清除掉sessionStorage。剩下的均會清理掉sessionStorage（比如打開新的tab、關掉當前tab再新開一個tab，更別提關閉瀏覽器了）

localStorage 使用

setItem(key, val);

getItem(key)

細節

只有設置localStorage的當前域才能使用，但是新開的tab還可以使用且關閉瀏覽器重新打開還在

用戶不主動刪除的話會一直存儲下去

大小為4M

localStorage可以存儲k-v形式的數據。存儲的值需要是字符串類型，沒法直接存儲對象，但是可以將對象序列化為字符串再存入。如果強行存入object的話，就會被調用object.toString從而悲劇，正確的方法應該是JSON.stringify

websql

Web SQL 數據庫 API 并不是 HTML5 規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端數據庫的 APIs。

使用

3個核心方法：

openDatabase：這個方法使用現有的數據庫或者新建的數據庫創建一個數據庫對象。

transaction：這個方法讓我們能夠控制一個事務，以及基于這種情況執行提交或者回滾。

executeSql：這個方法用于執行實際的 SQL 查詢。

具體的使用參考教程

indexdb

和websql類似，但是可以直接使用JavaScript來操作，具體的參看MDN-indexdb

參考：

MDN-cookie

聊一聊前端存儲那些事兒

聊一聊 cookie

http cookie

云服務器 GPU云服務器前端前端工程師前端工程師前端前端前端開發工程師前端開發前端工程師

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108112.html

【前端工程師手冊】說清楚JavaScript中的相等性判斷

摘要：如果沒有傳入的話如果是類型，則取否則，取這個方法大致和一樣，除了以下返回返回參考知乎中和區別是什么全面解析中的數據類型與類型轉換規范有哪些判斷相等性的方法 JavaScript現在提供了三種方法來判斷相等性： ===，三個等號即嚴格相等 ==，兩個等號即寬松相等 Object.is()，ES6中用來判斷相等的方法判斷相等性的細節 ===（嚴格相等）被比較的兩個數不會進行類型轉...

crossoverJie 2019-08-23 10:34 評論0 收藏0
【前端工程師手冊】前端應該知道的各種寬高

摘要：和都是相對于內邊距邊界的。和即為向上滾動時，元素內容區被遮住的那一部分。同理參考中的各種寬高屬性引子曾經校招面試的時候，學習了三個月前端的我去某廠面試，面試官循循善誘考察了一個開發中的實際場景，其中有需要用到某元素的高度，面試官問我clientHeight和offsetHeight的區別是什么，我當時一臉懵逼，這個問題對于當時的我來說已經完全超綱了...面試結果自然是面試官感謝我來...

jayce 2019-08-22 18:45 評論0 收藏0
【前端工程師手冊】前端應該知道的各種寬高

摘要：和都是相對于內邊距邊界的。和即為向上滾動時，元素內容區被遮住的那一部分。同理參考中的各種寬高屬性引子曾經校招面試的時候，學習了三個月前端的我去某廠面試，面試官循循善誘考察了一個開發中的實際場景，其中有需要用到某元素的高度，面試官問我clientHeight和offsetHeight的區別是什么，我當時一臉懵逼，這個問題對于當時的我來說已經完全超綱了...面試結果自然是面試官感謝我來...

Hujiawei 2019-08-30 15:54 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
【前端工程師手冊】布局

摘要：今天總結一下布局，之前校招面試的時候貌似很喜歡考布局，例如兩欄自適應布局三欄自適應布局等等，實現的方法多種多樣，總結一下以后就不亂了。脫離文檔流觸發使用脫離文檔流之后，我們再利用區域不會與浮動元素重疊的特性來使剩下的元素自適應。今天總結一下布局，之前校招面試的時候貌似很喜歡考布局，例如兩欄自適應布局、三欄自適應布局等等，實現的方法多種多樣，總結一下以后就不亂了。兩欄布局這里我們講...

maxmin 2019-08-30 14:15 評論0 收藏0