艾銻無限硬核：本地存儲(chǔ)和離線緩存的作用和區(qū)別

2020-03-06 15:28 作者：艾銻無限 瀏覽量：

   
一家企業(yè)的成功和成長(zhǎng)離不開優(yōu)秀的管理者，更離不開卓越的領(lǐng)導(dǎo)者，管理者和領(lǐng)導(dǎo)者本質(zhì)的區(qū)別，前者更多的是為了成就自己，而后者更多的是為了成就他人，

有的人因?yàn)樽孑叺幕颍筇飙h(huán)境以及所學(xué)習(xí)的內(nèi)容，讓自己很容易進(jìn)入領(lǐng)導(dǎo)者角色，有的人可能需要花更大的力氣和努力才能突破自身的局限，領(lǐng)悟成為領(lǐng)導(dǎo)者的法則，但無論是前者和后者都是在這條道路上，只要向前，終點(diǎn)就不會(huì)太遠(yuǎn).當(dāng)然對(duì)于追求完美的人來說，永遠(yuǎn)都沒有終點(diǎn)，而每一個(gè)目標(biāo)的達(dá)成都是一個(gè)新的起點(diǎn).

那么我們普通人怎樣才能從管理者邁向卓越領(lǐng)導(dǎo)者之路呢，艾銻無限有三點(diǎn)建議分享給大家：

第一，不要考慮你的恐懼，而要考慮你的希望和夢(mèng)想。

 
很多一線的伙伴，有著領(lǐng)導(dǎo)者的才華，但內(nèi)心因?yàn)檫^往經(jīng)歷或看到的，聽到的事件所影響，讓自己一想到所面對(duì)的未來，就心生恐懼，從而放棄可以爭(zhēng)取的機(jī)會(huì)，與人生的轉(zhuǎn)機(jī)失之交臂.

其實(shí)大部分恐懼都是頭腦的幻象，而非真實(shí)會(huì)發(fā)生的結(jié)果，但想像是可以殺死人的，我記得以前國(guó)外有一個(gè)實(shí)驗(yàn)，在一個(gè)監(jiān)獄里，監(jiān)獄長(zhǎng)為了懲罰一個(gè)無惡不作的重刑犯，有一天，他讓獄卒把這個(gè)重刑犯帶到一個(gè)封閉的空間中，這間屋子不僅沒有光，而且聽不見外面的聲音，這個(gè)重刑犯被帶到這間屋子的中間，雙手和雙腳都被綁了起來，整個(gè)身體與地面平行并懸掛在空中，頭向下低著， 監(jiān)獄長(zhǎng)還給這個(gè)重刑犯帶上了一個(gè)厚厚的頭套，讓他完全處在一個(gè)漆黑的狀態(tài)中，緊接者監(jiān)獄長(zhǎng)拿出一把匕首，快速在這個(gè)重刑犯人脖子上劃了一刀， 獄卒同時(shí)在這個(gè)人的脖子下方的地上放了一個(gè)盆， 監(jiān)獄長(zhǎng)和獄卒走后，整個(gè)屋子此刻只能聽到盆里滴血的聲音，這個(gè)重刑犯知道自己的死期到了，也沒有掙扎，就帶著極度的恐懼聽著自己的血一滴一滴敲打在盆中，很快就暈了過去，過了一會(huì)，醒了過來，發(fā)現(xiàn)自己還在滴血，又嚇暈了過去，就這樣，不斷的重復(fù)著……

一天過后，當(dāng)人們打開門，這個(gè)重刑犯已經(jīng)斷氣了，可他的脖子并沒有破，也沒有流血，那滴血聲音是怎么來的呢？ 原來監(jiān)獄長(zhǎng)和獄卒安裝了一個(gè)滴水的龍頭， 監(jiān)獄長(zhǎng)用的是一把鈍刀，只劃破對(duì)方表皮淺淺的一層，并沒有真正流出血來，這個(gè)重刑犯完全是被自己的恐懼嚇?biāo)赖?

所以大家透過個(gè)實(shí)驗(yàn)可以看到人類的自我暗示的威力有多大，很多時(shí)候不是我們沒有能力去做想做的事，而是我們內(nèi)在不斷的否定，讓自己越來越恐懼去行動(dòng)，從而導(dǎo)致最終的失敗，學(xué)會(huì)覺察內(nèi)在的思想，從不想要的想法中轉(zhuǎn)化到自己真正想要的想法上，行動(dòng)力就會(huì)越來越強(qiáng)，自己想要的結(jié)果也會(huì)很快的達(dá)成.
第二，不要去想你的挫折，而要去想你尚未實(shí)現(xiàn)的潛能。


   
大約在公元前5世紀(jì)，有一個(gè)工匠受希臘雅典城的委托雕刻一座石像，這座雕像將矗立在神廟的頂上。

這座石像的正面很好處理，但背面因?yàn)榉轿坏脑颍浅ｋy處理， 工匠為了能把背面處理得像正面一樣的漂亮，好幾次都從高處跌了下來，但他并沒有放棄，反而更加堅(jiān)定了自己的決心，一定要實(shí)現(xiàn)同樣的效果.
最終比預(yù)期時(shí)間晚了幾個(gè)月才完工，雅典城的官員因?yàn)樗某瑫r(shí)而非常生氣，問道：“你把雕像的背面雕刻得跟正面一樣漂亮有什么用呢？又沒人看得見背面！”

這個(gè)叫菲亞迪斯的工匠回答道：“是嗎？可上帝能看見。”

這座石像就是2400年以后的今天依然矗立在雅典帕農(nóng)神廟頂上的神像。

所以很多時(shí)候不是我們做不到，而是我們面對(duì)挫折和挑戰(zhàn)的時(shí)候，首先自我放棄，或者我們?yōu)榱私Y(jié)果而湊合，而不是去追求卓越，追求內(nèi)在真正的潛能，生命只有一次，不如大膽一點(diǎn)，反正我們什么也不會(huì)失去.

第三： 不要擔(dān)心你嘗試了什么，失敗了什么，而要關(guān)心你還能做什么。


  歐洲的兩個(gè)宗教組織在15世紀(jì)、16世紀(jì)發(fā)揮了支配作用，它們采用相同的方法取得成功，它們從一開始就采納相同的學(xué)習(xí)紀(jì)律。每當(dāng)耶穌會(huì)的神父或加爾文會(huì)的牧師要做任何重要的事時(shí)，比如進(jìn)行一項(xiàng)關(guān)鍵的決策，他們被要求把預(yù)期的結(jié)果以書面形式記錄下來。9個(gè)月以后，他們必須按照預(yù)期結(jié)果對(duì)實(shí)際結(jié)果進(jìn)行反饋分析。

這樣，他們很快就能知道自己在哪些方面做得很好，自己的優(yōu)勢(shì)在哪里，并且也能知道自己必須在哪些方面抓緊學(xué)習(xí)以及必須改變哪些習(xí)慣。最后，他們還能知道哪些方面自己缺乏天賦并無法勝任。

德魯克自己采用這種方法至少有50年了，他說：“這種方法能夠揭示一個(gè)人的長(zhǎng)處（一個(gè)人能夠了解自我，這可是最重要的事），并且指出哪些方面需要改進(jìn)，需要哪種性質(zhì)的改進(jìn)，區(qū)分出是沒有能力做的事還是根本不該嘗試的事，這樣就知道自己該如何改變.”

我們要學(xué)會(huì)運(yùn)用時(shí)間工具，盡可能去做一些自己沒有做過的事，對(duì)自己有挑戰(zhàn)的事，不要活在自己的記憶和失敗中，而是要關(guān)注當(dāng)下可以做點(diǎn)什么讓自己的未來有所不同，無論是圣賢還是偉大的導(dǎo)師他們都需要進(jìn)行反饋分析自己的思想和行為，來校正自己人生的方向和做事的標(biāo)準(zhǔn)，我們也一樣，所以學(xué)會(huì)自我反饋和邀請(qǐng)他人對(duì)我們進(jìn)行反饋是我們快速成長(zhǎng)的不二法門.

偉大的領(lǐng)導(dǎo)者都是活在自己的勇氣中，勇敢地追求自己的夢(mèng)想，相信自己的潛能是無限的，每一次挫折都是一次學(xué)習(xí)，從來不放棄任何一次嘗試的機(jī)會(huì)，從不關(guān)心自己失敗了什么，而是想這一刻我能從失敗中學(xué)習(xí)什么，做點(diǎn)什么可以讓自己的未來有所不同，你的人生又是如何做的呢?


艾銻無限硬核：本地存儲(chǔ)和離線緩存的作用和區(qū)別
 
 
前端的存儲(chǔ)方式有：localStorage、sessionStorage、cookie、UserData、webSQL、indexeddb、HTML5離線存儲(chǔ)等。各個(gè)存儲(chǔ)方式有各自的優(yōu)缺點(diǎn)，本文我們來探討一下不同存儲(chǔ)的功能及區(qū)別。

本地存儲(chǔ)

1.cookie

在h5之前，存儲(chǔ)主要用的是cookie。cookie會(huì)隨著每次http請(qǐng)求頭信息一起發(fā)送，無形中增加了網(wǎng)絡(luò)流量，另外，cookie能存儲(chǔ)的數(shù)據(jù)容量有限，根據(jù)瀏覽器類型不同而不同，IE6大約只能存儲(chǔ)2K。

1）cookie的存取方法
 
1.存:賦值（鍵值對(duì)）
 
document.cookie = "鍵=值"; //一次只能存一個(gè)鍵值對(duì)
 
2.取：不賦值
 
var v=document.cookie; //取出字符串

常用操作：

var arr1 = v.split("; ");//分割

JSON.stringify(obj); //對(duì)象轉(zhuǎn)換為字符串存入

JSON.parse(str);  //JSON字符串轉(zhuǎn)換為對(duì)象取出
 
3.刪：（設(shè)置存儲(chǔ)有效時(shí)長(zhǎng)為過去時(shí)間）
 
var date = new Date();

date.setDate(date.getDate()+"設(shè)置時(shí)長(zhǎng)");

document.cookie = "key=value;expires="+date.toUTCString();
 
2）cookie的優(yōu)缺點(diǎn)
 
優(yōu)點(diǎn)：

可控制過期時(shí)間，使其不會(huì)長(zhǎng)期有效

可擴(kuò)展、可用性比較好

可加密減少cookie被破解的可能性

缺點(diǎn)：

數(shù)量和長(zhǎng)度有限制，最多20條，最長(zhǎng)不能超過40k

在請(qǐng)求頭上帶著數(shù)據(jù)安全性差
 
3）cookie的應(yīng)用場(chǎng)景

主要應(yīng)用：購(gòu)物車、客戶端登錄
 
2.localStorage

localStorage（本地存儲(chǔ)）,可以長(zhǎng)期存儲(chǔ)數(shù)據(jù)，沒有時(shí)間限制，一天，一年，兩年甚至更長(zhǎng)，數(shù)據(jù)都可以使用。

localStorage中一般瀏覽器支持的是5M大小，這個(gè)在不同的瀏覽器中l(wèi)ocalStorage會(huì)有所不同

1）使用方法

    localStorage.setItem("key","value");//存儲(chǔ)

    localStorage.getItems(key);//按key進(jìn)行取值

    localStorage.removeItems(key);//按key單個(gè)刪除

    localStorage.clear();//刪除全部數(shù)據(jù)

    localStorage.length;//獲得數(shù)據(jù)的數(shù)量

    localStorage.valueOf();//獲取全部值
 
2）優(yōu)缺點(diǎn)
 
優(yōu)點(diǎn)：

localStorage拓展了cookie的4k限制

localStorage可以將第一次請(qǐng)求的5M大小數(shù)據(jù)直接存儲(chǔ)到本地，相比于cookie可以節(jié)約帶寬

localStorage的使用也是遵循同源策略的，所以不同的網(wǎng)站直接是不能共用相同的localStorage

缺點(diǎn)：

需要手動(dòng)刪除，否則長(zhǎng)期存在

瀏覽器大小不一，版本的支持也不一樣

localStorage只支持string類型的存儲(chǔ)，JSON對(duì)象需要轉(zhuǎn)換

localStorage本質(zhì)上是對(duì)字符串的讀取，如果存儲(chǔ)內(nèi)容多的話會(huì)消耗內(nèi)存空間，會(huì)導(dǎo)致頁面變卡

特點(diǎn)：

同源策略限制、只在本地存儲(chǔ)、永久保存、同瀏覽器共享
 
3）應(yīng)用場(chǎng)合

數(shù)據(jù)比較大的臨時(shí)保存方案。如在線編輯文章時(shí)的自動(dòng)保存。

多頁面訪問共同數(shù)據(jù)。sessionStorage只適用于同一個(gè)標(biāo)簽頁，localStorage相比而言可以在多個(gè)標(biāo)簽頁中共享數(shù)據(jù)。
 
3.sessionStorage

sessionStorage（會(huì)話存儲(chǔ)），只有在瀏覽器被關(guān)閉之前使用，創(chuàng)建另一個(gè)頁面時(shí)同意可以使用，關(guān)閉瀏覽器之后數(shù)據(jù)就會(huì)消失

1）使用方法

   sessionStorage.setItem("key","value");//存儲(chǔ)

    sessionStorage.getItems(key);//按key進(jìn)行取值

    sessionStorage.removeItems(key);//按key單個(gè)刪除

    sessionStorage.clear();//刪除全部數(shù)據(jù)

    sessionStorage.length;//獲得數(shù)據(jù)的數(shù)量

    sessionStorage.valueOf();//獲取全部值
 
2）特點(diǎn)
 
同源策略限制。若想在不同頁面之間對(duì)同一個(gè)sessionStorage進(jìn)行操作，這些頁面必須在同一協(xié)議、同一主機(jī)名和同一端口下。

單標(biāo)簽頁限制。sessionStorage操作限制在單個(gè)標(biāo)簽頁中，在此標(biāo)簽頁進(jìn)行同源頁面訪問都可以共享sessionStorage數(shù)據(jù)。

只在本地存儲(chǔ)。seesionStorage的數(shù)據(jù)不會(huì)跟隨HTTP請(qǐng)求一起發(fā)送到服務(wù)器，只會(huì)在本地生效，并在關(guān)閉標(biāo)簽頁后清除數(shù)據(jù)

存儲(chǔ)方式。seesionStorage的存儲(chǔ)方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串，也會(huì)在存儲(chǔ)時(shí)轉(zhuǎn)換為字符串。)。

存儲(chǔ)上限限制。不同的瀏覽器存儲(chǔ)的上限也不一樣，但大多數(shù)瀏覽器把上限限制在5MB以下。

 
3）應(yīng)用場(chǎng)合

sessionStorage 非常適合單頁應(yīng)用程序，可以方便在各業(yè)務(wù)模塊進(jìn)行傳值。
 
4.localStorange與sessionStorage的相同點(diǎn)和不同點(diǎn)

是不敢看完上面兩個(gè)感覺有點(diǎn)懵，好像一樣的？他們還是有所區(qū)別的，讓我們看看他們的相同點(diǎn)和不同點(diǎn)：
 
相同點(diǎn)：

存值都是以鍵值對(duì)形式存在，值也是存入字符串類型（如果是對(duì)象，就序列化以后再存入）；

localStorage和sessionStorage使用時(shí)使用相同的API；

都是用來存儲(chǔ)客戶端臨時(shí)信息的對(duì)象；

解決cookie大小4k的問題；解決請(qǐng)求頭常帶存儲(chǔ)信息的問題；解決關(guān)系型存儲(chǔ)的問題

不同點(diǎn)：

H5的兩種存儲(chǔ)技術(shù)的最大區(qū)別就是生命周期。

localStorage是本地存儲(chǔ)，存儲(chǔ)期限不限；

sessionStorage是會(huì)話存儲(chǔ)，頁面關(guān)閉數(shù)據(jù)就會(huì)丟失。
 
5. web storage和cookie的區(qū)別

Web Storage包括localStorange與sessionStorage。它的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次請(qǐng)求一個(gè)新的頁面的時(shí)候Cookie都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。

除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。

 
離線緩存

Html5 引入了應(yīng)用程序緩存，這意味著 web 應(yīng)用可在沒有因特網(wǎng)連接時(shí)進(jìn)行訪問

為什么要使用離線緩存？

應(yīng)用程序緩存為應(yīng)用帶來的優(yōu)勢(shì)：
 
離線瀏覽：用戶可在應(yīng)用離線時(shí)使用它們

速度：已緩存資源加載速度塊

減少服務(wù)器負(fù)載：瀏覽器只從服務(wù)器下載更新過的資源

 
2.Application Cache （Manifest）

1）使用方法：

1. 在html標(biāo)簽添加manifest屬性

在頁面的html標(biāo)簽中添加manifest屬性，屬性值為manifest文件的路徑。如：

    <!DOCTYPE HTML>

    <html manifest="../js/demo.manifest">
            ...
    </html>
 
2. 編寫manifest文件2> 編寫manifest文件

manifest文件是簡(jiǎn)單的文本文件，它會(huì)告知瀏覽器需要緩存的內(nèi)容以及不需要緩存的內(nèi)容。
 
manifest文件可分為三部分：

(1) CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

(2)NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存

(3)FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面（比如 404 頁面）
 
簡(jiǎn)單示例:

 CACHE MANIFEST

    #version 1.1   /*版本號(hào)*/

    CACHE:

        html/index.html /*需要緩存的文件*/

    NETWORK:

        js/jquery.js /*不需要緩存的文件*/

    FALLBACK:

        html/index.html /*當(dāng)頁面無法訪問時(shí)的回退頁面*/

 
2）注意事項(xiàng)：

瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣

如果manifest文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載，整個(gè)更新過程將視為失敗，瀏覽器會(huì)繼續(xù)加載之前的緩存

引用的manifest文件必須和html文件同源，同域

瀏覽器的自動(dòng)緩存會(huì)導(dǎo)致更改了的html文件必須更新版本才能更新頁面

更新版本后，必須刷新一次才會(huì)啟動(dòng)新版本

當(dāng)manifest文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新


3)離線緩存與傳統(tǒng)瀏覽器緩存區(qū)別：

瀏覽器緩存（Browser Caching）是為了節(jié)約網(wǎng)絡(luò)的資源加速瀏覽，瀏覽器在用戶磁盤上對(duì)最近請(qǐng)求過的文檔進(jìn)行存儲(chǔ)，當(dāng)訪問者再次請(qǐng)求這個(gè)頁面時(shí)，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁面的閱覽
 
區(qū)別：

離線緩存是針對(duì)整個(gè)應(yīng)用，瀏覽器緩存是單個(gè)文件

離線緩存斷網(wǎng)了還是可以打開頁面，瀏覽器緩存不行

離線緩存可以主動(dòng)通知瀏覽器更新資源
 
本地存儲(chǔ)和離線存儲(chǔ)有什么相同和不同

相同：

本地存儲(chǔ)與離線緩存都是為了方便網(wǎng)頁的加載，提高用戶體驗(yàn)等。

不同：

本地存儲(chǔ)一般存儲(chǔ)的都是數(shù)據(jù)，而離線緩存一般存儲(chǔ)的是網(wǎng)頁等。