艾銻無限硬核：本地存儲和離線緩存的作用和區別
2020-03-06 15:28 作者：艾銻無限 瀏覽量：
成為卓越領導者的三大法則
一家企業的成功和成長離不開優秀的管理者，更離不開卓越的領導者，管理者和領導者本質的區別，前者更多的是為了成就自己，而后者更多的是為了成就他人，
有的人因為祖輩的基因，后天環境以及所學習的內容，讓自己很容易進入領導者角色，有的人可能需要花更大的力氣和努力才能突破自身的局限，領悟成為領導者的法則，但無論是前者和后者都是在這條道路上，只要向前，終點就不會太遠.當然對于追求完美的人來說，永遠都沒有終點，而每一個目標的達成都是一個新的起點.
那么我們普通人怎樣才能從管理者邁向卓越領導者之路呢，艾銻無限有三點建議分享給大家：
第一，不要考慮你的恐懼，而要考慮你的希望和夢想。
很多一線的伙伴，有著領導者的才華，但內心因為過往經歷或看到的，聽到的事件所影響，讓自己一想到所面對的未來，就心生恐懼，從而放棄可以爭取的機會，與人生的轉機失之交臂.
其實大部分恐懼都是頭腦的幻象，而非真實會發生的結果，但想像是可以殺死人的，我記得以前國外有一個實驗，在一個監獄里，監獄長為了懲罰一個無惡不作的重刑犯，有一天，他讓獄卒把這個重刑犯帶到一個封閉的空間中，這間屋子不僅沒有光，而且聽不見外面的聲音，這個重刑犯被帶到這間屋子的中間，雙手和雙腳都被綁了起來，整個身體與地面平行并懸掛在空中，頭向下低著， 監獄長還給這個重刑犯帶上了一個厚厚的頭套，讓他完全處在一個漆黑的狀態中，緊接者監獄長拿出一把匕首，快速在這個重刑犯人脖子上劃了一刀， 獄卒同時在這個人的脖子下方的地上放了一個盆， 監獄長和獄卒走后，整個屋子此刻只能聽到盆里滴血的聲音，這個重刑犯知道自己的死期到了，也沒有掙扎，就帶著極度的恐懼聽著自己的血一滴一滴敲打在盆中，很快就暈了過去，過了一會，醒了過來，發現自己還在滴血，又嚇暈了過去，就這樣，不斷的重復著……
一天過后，當人們打開門，這個重刑犯已經斷氣了，可他的脖子并沒有破，也沒有流血，那滴血聲音是怎么來的呢？ 原來監獄長和獄卒安裝了一個滴水的龍頭， 監獄長用的是一把鈍刀，只劃破對方表皮淺淺的一層，并沒有真正流出血來，這個重刑犯完全是被自己的恐懼嚇死的.
所以大家透過個實驗可以看到人類的自我暗示的威力有多大，很多時候不是我們沒有能力去做想做的事，而是我們內在不斷的否定，讓自己越來越恐懼去行動，從而導致最終的失敗，學會覺察內在的思想，從不想要的想法中轉化到自己真正想要的想法上，行動力就會越來越強，自己想要的結果也會很快的達成.
第二，不要去想你的挫折，而要去想你尚未實現的潛能。
大約在公元前5世紀，有一個工匠受希臘雅典城的委托雕刻一座石像，這座雕像將矗立在神廟的頂上。
這座石像的正面很好處理，但背面因為方位的原因，非常難處理， 工匠為了能把背面處理得像正面一樣的漂亮，好幾次都從高處跌了下來，但他并沒有放棄，反而更加堅定了自己的決心，一定要實現同樣的效果.
最終比預期時間晚了幾個月才完工，雅典城的官員因為他的超時而非常生氣，問道：“你把雕像的背面雕刻得跟正面一樣漂亮有什么用呢？又沒人看得見背面！”
這個叫菲亞迪斯的工匠回答道：“是嗎？可上帝能看見。”
這座石像就是2400年以后的今天依然矗立在雅典帕農神廟頂上的神像。
所以很多時候不是我們做不到，而是我們面對挫折和挑戰的時候，首先自我放棄，或者我們為了結果而湊合，而不是去追求卓越，追求內在真正的潛能，生命只有一次，不如大膽一點，反正我們什么也不會失去.
第三： 不要擔心你嘗試了什么，失敗了什么，而要關心你還能做什么。
這樣，他們很快就能知道自己在哪些方面做得很好，自己的優勢在哪里，并且也能知道自己必須在哪些方面抓緊學習以及必須改變哪些習慣。最后，他們還能知道哪些方面自己缺乏天賦并無法勝任。
德魯克自己采用這種方法至少有50年了，他說：“這種方法能夠揭示一個人的長處（一個人能夠了解自我，這可是最重要的事），并且指出哪些方面需要改進，需要哪種性質的改進，區分出是沒有能力做的事還是根本不該嘗試的事，這樣就知道自己該如何改變.”
我們要學會運用時間工具，盡可能去做一些自己沒有做過的事，對自己有挑戰的事，不要活在自己的記憶和失敗中，而是要關注當下可以做點什么讓自己的未來有所不同，無論是圣賢還是偉大的導師他們都需要進行反饋分析自己的思想和行為，來校正自己人生的方向和做事的標準，我們也一樣，所以學會自我反饋和邀請他人對我們進行反饋是我們快速成長的不二法門.
偉大的領導者都是活在自己的勇氣中，勇敢地追求自己的夢想，相信自己的潛能是無限的，每一次挫折都是一次學習，從來不放棄任何一次嘗試的機會，從不關心自己失敗了什么，而是想這一刻我能從失敗中學習什么，做點什么可以讓自己的未來有所不同，你的人生又是如何做的呢?
艾銻無限硬核：本地存儲和離線緩存的作用和區別
前端的存儲方式有：localStorage、sessionStorage、cookie、UserData、webSQL、indexeddb、HTML5離線存儲等。各個存儲方式有各自的優缺點，本文我們來探討一下不同存儲的功能及區別。
本地存儲
1.cookie
在h5之前，存儲主要用的是cookie。cookie會隨著每次http請求頭信息一起發送，無形中增加了網絡流量，另外，cookie能存儲的數據容量有限，根據瀏覽器類型不同而不同，IE6大約只能存儲2K。
1）cookie的存取方法
1.存:賦值（鍵值對）
document.cookie = "鍵=值"; //一次只能存一個鍵值對
2.取：不賦值
var v=document.cookie; //取出字符串
常用操作：
var arr1 = v.split("; ");//分割
JSON.stringify(obj); //對象轉換為字符串存入
JSON.parse(str); //JSON字符串轉換為對象取出
3.刪：（設置存儲有效時長為過去時間）
var date = new Date();
date.setDate(date.getDate()+"設置時長");
document.cookie = "key=value;expires="+date.toUTCString();
2）cookie的優缺點
優點：
可控制過期時間，使其不會長期有效
可擴展、可用性比較好
可加密減少cookie被破解的可能性
缺點：
數量和長度有限制，最多20條，最長不能超過40k
在請求頭上帶著數據安全性差
3）cookie的應用場景
主要應用：購物車、客戶端登錄
2.localStorage
localStorage（本地存儲）,可以長期存儲數據，沒有時間限制，一天，一年，兩年甚至更長，數據都可以使用。
localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中localStorage會有所不同
1）使用方法
localStorage.setItem("key","value");//存儲
localStorage.getItems(key);//按key進行取值
localStorage.removeItems(key);//按key單個刪除
localStorage.clear();//刪除全部數據
localStorage.length;//獲得數據的數量
localStorage.valueOf();//獲取全部值
2）優缺點
優點：
localStorage拓展了cookie的4k限制
localStorage可以將第一次請求的5M大小數據直接存儲到本地，相比于cookie可以節約帶寬
localStorage的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的localStorage
缺點：
需要手動刪除，否則長期存在
瀏覽器大小不一，版本的支持也不一樣
localStorage只支持string類型的存儲，JSON對象需要轉換
localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
特點：
同源策略限制、只在本地存儲、永久保存、同瀏覽器共享
3）應用場合
數據比較大的臨時保存方案。如在線編輯文章時的自動保存。
多頁面訪問共同數據。sessionStorage只適用于同一個標簽頁，localStorage相比而言可以在多個標簽頁中共享數據。
3.sessionStorage
sessionStorage（會話存儲），只有在瀏覽器被關閉之前使用，創建另一個頁面時同意可以使用，關閉瀏覽器之后數據就會消失
1）使用方法
sessionStorage.setItem("key","value");//存儲
sessionStorage.getItems(key);//按key進行取值
sessionStorage.removeItems(key);//按key單個刪除
sessionStorage.clear();//刪除全部數據
sessionStorage.length;//獲得數據的數量
sessionStorage.valueOf();//獲取全部值
2）特點
同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協議、同一主機名和同一端口下。
單標簽頁限制。sessionStorage操作限制在單個標簽頁中，在此標簽頁進行同源頁面訪問都可以共享sessionStorage數據。
只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一起發送到服務器，只會在本地生效，并在關閉標簽頁后清除數據
存儲方式。seesionStorage的存儲方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串，也會在存儲時轉換為字符串。)。
存儲上限限制。不同的瀏覽器存儲的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下。
3）應用場合
sessionStorage 非常適合單頁應用程序，可以方便在各業務模塊進行傳值。
4.localStorange與sessionStorage的相同點和不同點
是不敢看完上面兩個感覺有點懵，好像一樣的？他們還是有所區別的，讓我們看看他們的相同點和不同點：
相同點：
存值都是以鍵值對形式存在，值也是存入字符串類型（如果是對象，就序列化以后再存入）；
localStorage和sessionStorage使用時使用相同的API；
都是用來存儲客戶端臨時信息的對象；
解決cookie大小4k的問題；解決請求頭常帶存儲信息的問題；解決關系型存儲的問題
不同點：
H5的兩種存儲技術的最大區別就是生命周期。
localStorage是本地存儲，存儲期限不限；
sessionStorage是會話存儲，頁面關閉數據就會丟失。
5. web storage和cookie的區別
Web Storage包括localStorange與sessionStorage。它的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。
離線緩存
Html5 引入了應用程序緩存，這意味著 web 應用可在沒有因特網連接時進行訪問
為什么要使用離線緩存？
應用程序緩存為應用帶來的優勢：
離線瀏覽：用戶可在應用離線時使用它們
速度：已緩存資源加載速度塊
減少服務器負載：瀏覽器只從服務器下載更新過的資源
2.Application Cache （Manifest）
1）使用方法：
1. 在html標簽添加manifest屬性
在頁面的html標簽中添加manifest屬性，屬性值為manifest文件的路徑。如：
<!DOCTYPE HTML>
<html manifest="../js/demo.manifest">
...
</html>
2. 編寫manifest文件2> 編寫manifest文件
manifest文件是簡單的文本文件，它會告知瀏覽器需要緩存的內容以及不需要緩存的內容。
manifest文件可分為三部分：
(1) CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
(2)NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
(3)FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
簡單示例:
CACHE MANIFEST
#version 1.1 /*版本號*/
CACHE:
html/index.html /*需要緩存的文件*/
NETWORK:
js/jquery.js /*不需要緩存的文件*/
FALLBACK:
html/index.html /*當頁面無法訪問時的回退頁面*/
2）注意事項：
瀏覽器對緩存數據的容量限制可能不太一樣
如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器會繼續加載之前的緩存
引用的manifest文件必須和html文件同源，同域
瀏覽器的自動緩存會導致更改了的html文件必須更新版本才能更新頁面
更新版本后，必須刷新一次才會啟動新版本
當manifest文件發生改變時，資源請求本身也會觸發更新
瀏覽器緩存（Browser Caching）是為了節約網絡的資源加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁面的閱覽
區別：
離線緩存是針對整個應用，瀏覽器緩存是單個文件
離線緩存斷網了還是可以打開頁面，瀏覽器緩存不行
離線緩存可以主動通知瀏覽器更新資源
本地存儲和離線存儲有什么相同和不同
相同：
本地存儲與離線緩存都是為了方便網頁的加載，提高用戶體驗等。
不同：
本地存儲一般存儲的都是數據，而離線緩存一般存儲的是網頁等。
相關文章
IT電腦維護外包
關閉