資訊專欄INFORMATION COLUMN
摘要：前端存儲簡介一種在前端保存數(shù)據(jù)的思想。為了保證前端性能，一般不會保存大量數(shù)據(jù)。在手動刪除前一直存在關閉當前頁面后被清除可存放大小與服務器通信每次都在頭部信息中。
前端存儲 簡介
一種在前端保存數(shù)據(jù)的思想。第一次在頁面中的保存數(shù)據(jù)，那么從第二次開始就可以使用了。可以使用的方法有：
cookie
localeStorage
sessionStorage
ie的userData
web sql
indexedDB
從技術(shù)角度看待這些方法。沒有高低之分，只有對特定任務是否合適。
cookie 簡介cookie："小餅干，小甜品"
參與http通信。因為在http中可以看到cookie，所以易受到攻擊。
面向路徑。只作用于當前路徑（頁面）。
每個cookie < 4K
運行機制 使用 總結(jié)設置cookie的值
function setCookie(key, value, duration) {
// duration 單位為ms
var d = new Date();
document.cookie = key + "=" + value + "; " + d.getTime() + duration
}
獲取cookie的值
function getCookie(key) {
var cookieArr = document.cookie.split(";");
for (var i = 0; i < cookieArr.length; i++) {
var cookie = cookieArr[i].trim();
if (cookie.indexOf(key)===0) {
return cookie.substring(key.length, key.cookie.length);
}
}
}
localStorage/sessionStorage
localStorage < 5M
localStorage的使用也是遵循同源策略的，所以不同的網(wǎng)站直接是不能共用相同的localStorage?？梢栽谕W(wǎng)站下跨頁面。
sessionStorage只作用于當前頁面。
優(yōu)勢
1、localStorage拓展了cookie的4K限制
2、localStorage會可以將第一次請求的數(shù)據(jù)直接存儲到本地，這個相當于一個5M大小的針對于前端頁面的數(shù)據(jù)庫，相比于cookie可以節(jié)約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的
局限
1、瀏覽器的大小不統(tǒng)一，并且在IE8以上的IE版本才支持localStorage這個屬性
2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們?nèi)粘１容^常見的JSON對象類型需要一些轉(zhuǎn)換
3、localStorage在瀏覽器的隱私模式下面是不可讀取的
4、localStorage本質(zhì)上是對字符串的讀取，如果存儲內(nèi)容多的話會消耗內(nèi)存空間，會導致頁面變卡
5、localStorage不能被爬蟲抓取到
一般在第一次加載頁面時在本地保存好數(shù)據(jù)。從第二次開始使用本地保存的數(shù)據(jù)。為了保證前端性能，一般不會保存大量數(shù)據(jù)。只保存關鍵數(shù)據(jù)，再根據(jù)它做出判斷后執(zhí)行相應的程序。
window.localStorage//boolean 瀏覽器是否支持
寫入(3種形式)
window.localStorage["a"] = 1;
window.localStorage.b = 1;
window.setItem("c",3);
讀取
var a = window.localStorage.a;
var b = window.localStorage["b"];
var c = window.localStorage.getItem("c");
var d = window.localStorage.key(d);
修改
window.localStorage.a = 4;
刪除
window.localStorage.clear();// 清除據(jù)
window.localStorage.removeItem("a");// 刪除a
方法
localStorage.setItem("key", "value");
localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();
三者的區(qū)別
| 特性 | cookie | localStorage | sessionStorage | userData | web sql | indexedDB |
|---|---|---|---|---|---|---|
| 生命周期 | 一般由服務器生成，可設置失效時間。若在瀏覽器生成，默認關閉瀏覽器后失效。 | 在手動刪除前一直存在 | 關閉當前頁面后被清除 | |||
| 可存放大小 | <4k | <5m | <5m | |||
| 與服務器通信 | 每次都在http頭部信息中。過多會影響性能 | 僅在客戶端不能與通信 | 僅在客戶端不能與通信 | |||
| 易用性 | 原生的方法較難使用，自己封裝后會好用。 | 原生的方法就挺好用?？稍俳环庋b | 原生的方法就挺好用?？稍俳环庋b |
2018/04/03 by stone
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93971.html
摘要：發(fā)布自的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處介紹在中，引入了兩個新的前端存儲特性這兩者非常相似，都是用來在前端保存一定量的數(shù)據(jù)，稱為前端存儲，但是這兩者仍然存在一定區(qū)別生命周期的生命周期是永久的，即使關閉頁面瀏覽器，其中的內(nèi)容也不會消失， 發(fā)布自Kindem的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處 localStorage 介紹 在HTML5中，引入了兩個新的前端存儲特性： loc...
摘要：前端最基礎的就是。這是初級階段的最后一堂了。敏感數(shù)據(jù)要設置防止意外的被他人獲取。是什么服務器端存放數(shù)據(jù)。都是用來做瀏覽器端存儲的。解決的問題的存儲大小問題。該使用索引來實現(xiàn)對該數(shù)據(jù)的高性能搜索。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，...
摘要：如圖圖顧名思義，，是級別的存儲。如筆者寫的一篇淺析文章聊一聊百度移動端首頁前端速度那些事兒讀者們可以嘗試使用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/frontenddriver 在web開發(fā)越來越復雜的今天，前端擁有的能力也越來越多。其中最重要的一項莫過于web存儲。...
摘要：對于第二種存儲方式，我們前端需要將其二進制流交由對象處理，然后通過的生成臨時賦值給屬性來顯示。當后端返回特定的圖片二進制流的時候，就像我第一里的情景再現(xiàn)說的，前端用容器接收。 前言 作為前端工程師 de 我們，日常少不了會跟圖片打交道。在各大電商平臺工作的前端工程師們，感受可能會更加的明顯。 以下是我之前跟圖片打交道踩到的坑，跟大家分享一下經(jīng)驗。 一、情景再現(xiàn) 用postman請求接口...
閱讀 3525·2021-11-18 10:02
閱讀 959·2021-09-04 16:48
閱讀 2045·2019-08-30 15:55
閱讀 3549·2019-08-30 15:52
閱讀 1821·2019-08-30 14:08
閱讀 3565·2019-08-30 13:19
閱讀 1151·2019-08-27 10:53
閱讀 3129·2019-08-26 12:11
