本文一共分為兩章。
第一章講web storage的使用，目標是讓大家看完第一章後基本能應對80%的使用場景。
第二章會講一些web storage的高階知識，包括一些標準，沒有太多看的必要，但是也會有點小用。
當乙個新的技術出現時（已經不新了=。=），我們都會想知道：這個技術的出現是為了解決什麼問題的？所以，web storage的出現又是為了解決什麼問題咧？
顧名思義，web storage的出現就是為了解決客戶端資料儲存問題的。那有人就問了，儲存不是有cookie, userdata, flash等等解決方案嗎？需要這個web storage嗎？
其實web storage的出現是為了克服cookie的一些限制，如果你的資料不需要服務端處理，只需要儲存在客戶端，根本就不需要持續的將資料發回伺服器（cookie會跟在每次http請求裡）。web storage的兩個主要目標是：
所以，雖然現在的技術方案確實能解決很多儲存問題，但是，既然出現了這麼個新的東西，肯定也是有它存在的意義的，我們不妨深入的了解和嘗試一下，說不定就會發現還是挺好用的。
目前的情況是cookie和localstorage用的比較多，我們也可以嘗試用sessionstorage做一些cookie現在做的事情。既然要使用它，那我們首先要知道各大瀏覽器對它的支援情況，如果滿足業務需要，那我們就可以放心大膽的用了。
瀏覽器ie
firefox
chrome
safari
opera版本8
3.54
410.5
從上面的圖可以看出來，桌面瀏覽器只有ie7及以下不支援web storage。
瀏覽器andriod
ucsafari
opera mini
版本2.1
113.2
不支援 移動端瀏覽器除了opera mini不支援外，其他都是支援的
綜合以上的資訊，web storage的相容性其實是很好的，基本可以放心大膽的用它了。（如果你的專案需要相容ie7及以下，可以考慮用userdata代替，本文不展開介紹web storage以外的知識）。
我們已經確定了web storage可用了，現在可以具體的講講它的使用。web storage有兩種實現，乙個是localstorage，乙個是sessionstorage。在講它們之前我們先解釋乙個概念：文件源。
文件源是通過協議，主機名，埠來確定的。如圖：
只要有任何一項不同，它們就是非同源文件，下面的每個url都有不同的文件源：
// 協議：http; 主機名：www.example.com
// 不同協議
// 不同主機名
:8000 // 不同埠
永久性儲存的。
時效localstorage裡的資料的時效是永久的！只要你不刪，它就一直在那。除非web應用需要刪除或者使用者需要刪掉它。
作用域localstorage的作用域是限定在文件源級別的，
不同的文件源之間是不能讀取和修改對方的資料的，而相同的文件源是可以的。但是不同的瀏覽器是不共享storage的，也就是說你在chorme瀏覽器裡存的資料，在firefox裡是訪問不到的，即使它們是同一文件源。
sessionstorage是用來做臨時性儲存的。
時效sessionstorage的時效只存在於標籤頁存在的時間，一旦標籤被關閉了，sessionstorage儲存的資料也會被刪除掉。
作用域sessionstorage的作用域同樣是限定在文件源級別的，不僅如此，它還被限制在標籤頁中，不同標籤頁的同乙個頁面擁有各自的sessionstorage，資料不能共享。如果是乙個頁面裡有兩個元素，它們是共享sessionstorage的。
好，簡要的講完了web storage的特性之後呢，接下來該講講怎麼操作web storage了。
storage物件提供了操作key/value對（下面我們稱之為item）的方法，key和value都是string型別的值（包括空字串），如果存的不是字串，會在儲存前被轉換成字串，要小心哦！
length返回storage物件內item的數量，這是乙個唯讀屬性。
下面的**可以在chorme控制台裡給localstorage增加乙個判斷是否為空的方法
localstorage.__proto__.isempty = function isempty()注意：存入storage物件內的item的排序順序由瀏覽器廠商自己決定，不一定是按照你存入的順序排序的哦,當你增加或者刪除item時，index對應的值可能會變化下面的**可以遍歷localstorage裡的所有key
for (let i = 0, len = localstorage.length; i < len; i++)localstorage.getitem('gameremainingtime');quotaexceedeerrordomexception異常，不改變storage內的任何內容（表示storage已經存滿了，storage目前推薦的儲存容量上限為5m）
localstorage.setitem('gameremainingtime', '10');localstorage.removeitem('gameremainingtime');localstorage.clear();storage事件（本視窗除外）。
重要：只有當儲存資料真正發生變化時才會觸發儲存事件，比如給乙個item重新設定乙個和原來一樣的value，或者是刪除乙個不存在的item是不會觸發儲存事件的。
storageevent的幾個屬性：
window.addeventlistener('storage', function(e) , false);對於存在sessionstorage裡的資料，瀏覽器是不應該給它設定過期時間的，它有自己的生命週期。除非使用者要求刪掉資料，或者儲存空間不足，或者處於完全原因。
現在有些瀏覽器有開啟上次關閉的標籤頁的功能，所以sessionstorage的生命週期可能並不是在標籤頁關閉之後就立馬結束，可能會延時一段時間。
如果使用者禁用了快取，那麼在我們存入資料時會丟擲securityerrordomexception
目前推薦的磁碟空間是5m，但是不同的瀏覽器廠商有不同的設定，這個設定會由實際檢驗合理性，比較合理的大小可以反饋給w3c，然後他們來修改這個推薦的大小。
當儲存空間即將達到上限的時候，瀏覽器可以提醒使用者授權增加一點儲存空間，剩餘的儲存空間瀏覽器也應該能讓使用者知道。
ie對資料的儲存是非同步的，firefox和webkit是同步的。在資料量少的時候是看不出區別的。除非儲存的資料量達到一定的量級，你會發現ie執行的會比較快，因為它跳過了寫到磁碟的過程。
DHTML實用指南
改進checkbox 單擊我可以改變 checkbox的狀態 使用label實現快捷鍵的功能 姓名 n 文字框的提示和輸入 開啟和關閉乙個新的視窗 開啟我的 關閉我的 陣列中的方法 join 是將陣列轉換成字串,括號裡的字段是指定的分隔符 sort 是排序 array1 new array a b ...
DHTML實用指南
改進checkbox 單擊我可以改變 checkbox的狀態 使用label實現快捷鍵的功能 姓名 n 文字框的提示和輸入 開啟和關閉乙個新的視窗 開啟我的 關閉我的 陣列中的方法 join 是將陣列轉換成字串,括號裡的字段是指定的分隔符 sort 是排序 array1 new array a b ...
npm實用指南
讓安裝速度變快一些的方法 npm config set proxy 設定 後邊的 鏈結填寫自己可以用的。或者使用 提供的映象位址，但是在某些情況下依然超時 例如electron npm config set registry global npm config set disturl global ...