前端的儲存方式有：localstorage、sessionstorage、cookie、userdata、websql、indexeddb、html5離線儲存等
1、本地儲存
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條，最長不能超過4k
在請求頭上帶著資料安全性差
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();//獲取全部值
優點：localstorage拓展了cookie的4k限制
localstorage可以將第一次請求的5m大小資料直接儲存到本地，相比於cookie可以節約頻寬
localstorage的使用也是遵循同源策略的，所以不同的**直接是不能共用相同的localstorage
缺點：需要手動刪除，否則長期存在
瀏覽器大小不一，版本的支援也不一樣
localstorage只支援string型別的儲存，json物件需要轉換
localstorage本質上是對字串的讀取，如果儲存內容多的話會消耗記憶體空間，會導致頁面變卡
特點：同源策略限制、只在本地儲存、永久儲存、同瀏覽器共享
3.應用場合sessionstorage（會話儲存），只有在瀏覽器被關閉之前使用，建立另乙個頁面時同意可以使用，關閉瀏覽器之後資料就會消失
1.使用方法
sessionstorage.setitem("key","value");//儲存
sessionstorage.getitems(key);//按key進行取值
sessionstorage.removeitems(key);//按key單個刪除
sessionstorage.clear();//刪除全部資料
sessionstorage.length;//獲得資料的數量
sessionstorage.valueof();//獲取全部值
同源策略限制。若想在不同頁面之間對同乙個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僅僅是為了在本地「儲存」資料而生。
2、離線快取
html5 引入了應用程式快取，這意味著 web 應用可在沒有網際網路連線時進行訪問
1.為什麼要使用離線快取？
應用程式快取為應用帶來的優勢：
在頁面的html標籤中新增manifest屬性，屬性值為manifest檔案的路徑。如：
...
manifest檔案是簡單的文字檔案，它會告知瀏覽器需要快取的內容以及不需要快取的內容。
(3)fallback - 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面（比如 404 頁面）
簡單示例：
cache manifest
#version 1.1 /*版本號*/
cache:
html/index.html /*需要快取的檔案*/
network:
js/jquery.js /*不需要快取的檔案*/
fallback:
html/index.html /*當頁面無法訪問時的回退頁面*/
瀏覽器快取（browser caching）是為了節約網路的資源加速瀏覽，瀏覽器在使用者磁碟上對最近請求過的文件進行儲存，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁碟顯示文件，這樣就可以加速頁面的閱覽
區別：1、離線快取是針對整個應用，瀏覽器快取是單個檔案
2、離線快取斷網了還是可以開啟頁面，瀏覽器快取不行
3、離線快取可以主動通知瀏覽器更新資源
3、本地儲存和離線儲存有什麼不同
本地儲存與離線快取都是為了方便網頁的載入，提高使用者體驗等。
本地儲存一般儲存的都是資料，而離線快取一般儲存的是網頁等
HTML5主要新增功能
html5主要新增功能 使用時需要判斷瀏覽器是否支援html5 1 dom操作新增元素選擇器2個，不太好用，不如還用jquery 2 canvas 畫板，畫2d圖形，也可以假3d，注意d小寫 5 web儲存 session操作只限定在乙個頁面有效，本地儲存是所有頁面都有效，他們的功能類似cookie...
HTML5新增標籤以及功能
定義文章側邊欄 定義一組 物件以及文字內容 定義figure的標題 布局頁面時用的語義標籤 定義導航 頭部定義文件中的區段 區域 尾部input其他的型別 1.text 文字輸入框 2.password 密碼 3.button 按鈕 4.checkbox 複選 5.radio 單選 6.submit...
HTML5新增的表單驗證功能
html5 表單增加了許多內建的控制項和控制項屬性 xhtml 中需要放在 form 之中的諸如 input button select textarea 等標籤元素，在 html 5 中完全可以放在頁面任何位置，並通過新增的 form 屬性指向元素所屬表單的 id 值，即可關聯起來。email輸入...