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

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

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

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

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

第一，不要考慮你的恐懼，而要考慮你的希望和夢想。

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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


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

本地存儲

1.cookie

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

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

常用操作：

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

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

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

date.setDate(date.getDate()+"設(shè)置時長");

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

可控制過期時間，使其不會長期有效

可擴展、可用性比較好

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

缺點：

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

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

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

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

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

1）使用方法

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

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

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

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

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

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

localStorage拓展了cookie的4k限制

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

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

缺點：

需要手動刪除，否則長期存在

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

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

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

特點：

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

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

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

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

1）使用方法

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

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

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

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

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

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

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

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

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

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

 
3）應(yīng)用場合

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

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

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

localStorage和sessionStorage使用時使用相同的API；

都是用來存儲客戶端臨時信息的對象；

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

不同點：

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

localStorage是本地存儲，存儲期限不限；

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

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

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

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

 
離線緩存

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

為什么要使用離線緩存？

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

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

減少服務(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文件是簡單的文本文件，它會告知瀏覽器需要緩存的內(nèi)容以及不需要緩存的內(nèi)容。
 
manifest文件可分為三部分：

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

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

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

 CACHE MANIFEST

    #version 1.1   /*版本號*/

    CACHE:

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

    NETWORK:

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

    FALLBACK:

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

 
2）注意事項：

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

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

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

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

更新版本后，必須刷新一次才會啟動新版本

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


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

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

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

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

離線緩存可以主動通知瀏覽器更新資源
 
本地存儲和離線存儲有什么相同和不同

相同：

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

不同：

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