小編給大家分享一下http前端存儲的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
http協(xié)議的無狀態(tài)，所謂無狀態(tài)即是服務(wù)器并不是知道這次的請求和上次的請求是不是同一個client發(fā)來的，就好比你經(jīng)常去一家超市買東西，老板并不記得你是誰。但是如果你每次帶著你的會員卡過來，那么老板就可以識別出你是誰了，cookie的作用類似于會員卡起的作用。
當(dāng)服務(wù)器收到HTTP請求時，服務(wù)器可以在響應(yīng)頭里面添加一個Set-Cookie選項。瀏覽器收到響應(yīng)后通常會保存下Cookie，之后對該服務(wù)器每一次請求中都通過Cookie請求頭部將Cookie信息發(fā)送給服務(wù)器。另外，Cookie的過期時間、域、路徑、有效期、適用站點都可以根據(jù)需要來指定。
當(dāng)然了，瀏覽器端也可以操作cookie，document.cookie可以獲取當(dāng)前頁面的所有cookie。
這兩個屬性決定了cookie是否會被發(fā)往哪些URL
Domain 標(biāo)識指定了哪些主機(jī)可以接受Cookie。如果不指定，默認(rèn)為當(dāng)前文檔的主機(jī)（不包含子域名）。如果指定了Domain，則一般包含子域名。
例如，如果設(shè)置 Domain=mozilla.org，則Cookie也包含在子域名中（如developer.mozilla.org）。
Path 標(biāo)識指定了主機(jī)下的哪些路徑可以接受Cookie（該URL路徑必須存在于請求URL中）。以字符 %x2F ("/") 作為路徑分隔符，子路徑也會被匹配。
例如domain=qq.com，path=/blog，則該cookie會被發(fā)往：
qq.com/blog
wx.qq.com/blog
wx.qq.com/blog/aa
....
這兩個屬性決定了cookie在瀏覽器保存多久
具體的細(xì)節(jié)為：
Expires 為 Cookie 的刪除設(shè)置一個過期的日期
Max-age 設(shè)置一個 Cookie 將要過期的秒數(shù)
IE 瀏覽器(ie6、ie7 和 ie8) 不支持 max-age，所有的瀏覽器都支持 expires
如果同時設(shè)置了expires和max-age，那么支持max-age的瀏覽器會忽略expires的值，不支持max-age的瀏覽器會忽略max-age只支持expires
如果expires和max-age都不設(shè)置，該cookie會成為一個session cookie，即關(guān)閉瀏覽器的時候會被自動刪除
標(biāo)記為 Secure 的Cookie只應(yīng)通過被HTTPS協(xié)議加密過的請求發(fā)送給服務(wù)端。但即便設(shè)置了 Secure 標(biāo)記，敏感信息也不應(yīng)該通過Cookie傳輸，因為Cookie有其固有的不安全性，Secure 標(biāo)記也無法提供確實的安全保障。從 Chrome 52 和 Firefox 52 開始，不安全的站點（http:）無法使用Cookie的 Secure 標(biāo)記
為避免跨域腳本 (XSS) 攻擊，通過JavaScript的 Document.cookie API無法訪問帶有 HttpOnly 標(biāo)記的Cookie，它們只應(yīng)該發(fā)送給服務(wù)端。如果包含服務(wù)端 Session 信息的 Cookie 不想被客戶端 JavaScript 腳本調(diào)用，那么就應(yīng)該為其設(shè)置 HttpOnly 標(biāo)記。
服務(wù)端set-cookie即可
如下圖是GitHub的設(shè)置cookie
直接在JavaScript里操作即可：
document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=github.com; path=/";
修改一個cookie時，要保證name-domain-path一致，否則不會修改舊值，而是添加了一個新的 cookie。
保證name-domain-path一致，并且把expires設(shè)置為一個過去的時間點
setItem(key, val);
getItem(key)
只有設(shè)置sessionStorage的當(dāng)前域才能使用
只有頁面刷新才不會清除掉sessionStorage。剩下的均會清理掉sessionStorage（比如打開新的tab、關(guān)掉當(dāng)前tab再新開一個tab，更別提關(guān)閉瀏覽器了）
setItem(key, val);
getItem(key)
只有設(shè)置localStorage的當(dāng)前域才能使用，但是新開的tab還可以使用且關(guān)閉瀏覽器重新打開還在
用戶不主動刪除的話會一直存儲下去
大小為4M
localStorage可以存儲k-v形式的數(shù)據(jù)。存儲的值需要是字符串類型，沒法直接存儲對象，但是可以將對象序列化為字符串再存入。如果強(qiáng)行存入object的話，就會被調(diào)用object.toString從而悲劇，正確的方法應(yīng)該是JSON.stringify
Web SQL 數(shù)據(jù)庫 API 并不是 HTML5 規(guī)范的一部分，但是它是一個獨立的規(guī)范，引入了一組使用 SQL 操作客戶端數(shù)據(jù)庫的 APIs。
3個核心方法：
openDatabase：這個方法使用現(xiàn)有的數(shù)據(jù)庫或者新建的數(shù)據(jù)庫創(chuàng)建一個數(shù)據(jù)庫對象。
transaction：這個方法讓我們能夠控制一個事務(wù)，以及基于這種情況執(zhí)行提交或者回滾。
executeSql：這個方法用于執(zhí)行實際的 SQL 查詢。
以上是“http前端存儲的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
