前端存儲(chǔ)

luckyw 發(fā)布于2019-08-22 16:01 / 1624人閱讀

摘要：前端存儲(chǔ)簡(jiǎn)介一種在前端保存數(shù)據(jù)的思想。為了保證前端性能，一般不會(huì)保存大量數(shù)據(jù)。在手動(dòng)刪除前一直存在關(guān)閉當(dāng)前頁(yè)面后被清除可存放大小與服務(wù)器通信每次都在頭部信息中。

前端存儲(chǔ) 簡(jiǎn)介

一種在前端保存數(shù)據(jù)的思想。第一次在頁(yè)面中的保存數(shù)據(jù)，那么從第二次開(kāi)始就可以使用了。可以使用的方法有：

localeStorage

sessionStorage

ie的userData

web sql

indexedDB

從技術(shù)角度看待這些方法。沒(méi)有高低之分，只有對(duì)特定任務(wù)是否合適。

cookie 簡(jiǎn)介

cookie："小餅干，小甜品"

參與http通信。因?yàn)樵趆ttp中可以看到cookie，所以易受到攻擊。

面向路徑。只作用于當(dāng)前路徑（頁(yè)面）。

每個(gè)cookie < 4K

運(yùn)行機(jī)制

使用

總結(jié)

設(shè)置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ǎng)站下跨頁(yè)面。

sessionStorage只作用于當(dāng)前頁(yè)面。

優(yōu)勢(shì)
1、localStorage拓展了cookie的4K限制
2、localStorage會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地，這個(gè)相當(dāng)于一個(gè)5M大小的針對(duì)于前端頁(yè)面的數(shù)據(jù)庫(kù)，相比于cookie可以節(jié)約帶寬，但是這個(gè)卻是只有在高版本的瀏覽器中才支持的

局限
1、瀏覽器的大小不統(tǒng)一，并且在IE8以上的IE版本才支持localStorage這個(gè)屬性
2、目前所有的瀏覽器中都會(huì)把localStorage的值類(lèi)型限定為string類(lèi)型，這個(gè)在對(duì)我們?nèi)粘１容^常見(jiàn)的JSON對(duì)象類(lèi)型需要一些轉(zhuǎn)換
3、localStorage在瀏覽器的隱私模式下面是不可讀取的
4、localStorage本質(zhì)上是對(duì)字符串的讀取，如果存儲(chǔ)內(nèi)容多的話(huà)會(huì)消耗內(nèi)存空間，會(huì)導(dǎo)致頁(yè)面變卡
5、localStorage不能被爬蟲(chóng)抓取到

使用

一般在第一次加載頁(yè)面時(shí)在本地保存好數(shù)據(jù)。從第二次開(kāi)始使用本地保存的數(shù)據(jù)。為了保證前端性能，一般不會(huì)保存大量數(shù)據(jù)。只保存關(guān)鍵數(shù)據(jù)，再根據(jù)它做出判斷后執(zhí)行相應(yīng)的程序。

window.localStorage//boolean 瀏覽器是否支持

寫(xiě)入(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
生命周期	一般由服務(wù)器生成，可設(shè)置失效時(shí)間。若在瀏覽器生成，默認(rèn)關(guān)閉瀏覽器后失效。	在手動(dòng)刪除前一直存在	關(guān)閉當(dāng)前頁(yè)面后被清除
可存放大小	<4k	<5m	<5m
與服務(wù)器通信	每次都在http頭部信息中。過(guò)多會(huì)影響性能	僅在客戶(hù)端不能與通信	僅在客戶(hù)端不能與通信
易用性	原生的方法較難使用，自己封裝后會(huì)好用。	原生的方法就挺好用。可再交封裝	原生的方法就挺好用。可再交封裝