一、本地存儲(chǔ)由來(lái)的背景
由于HTML4時(shí)代Cookie的大小、格式、存儲(chǔ)數(shù)據(jù)格式等限制，網(wǎng)站應(yīng)用如果想在瀏覽器端存儲(chǔ)用戶的部分信息，那么只能借助于Cookie。但是Cookie的這些限制，也就導(dǎo)致了Cookie只能存儲(chǔ)一些ID之類的標(biāo)識(shí)符等簡(jiǎn)單的數(shù)據(jù)。
下面是Cookie的限制：
大多數(shù)瀏覽器支持最大為 4096 字節(jié)的 Cookie。
瀏覽器還限制站點(diǎn)可以在用戶計(jì)算機(jī)上存儲(chǔ)的 Cookie 的數(shù)量。大多數(shù)瀏覽器只允許每個(gè)站點(diǎn)存儲(chǔ) 20 個(gè)Cookie；如果試圖存儲(chǔ)更多 Cookie，則最舊的 Cookie 便會(huì)被丟棄。
有些瀏覽器還會(huì)對(duì)它們將接受的來(lái)自所有站點(diǎn)的 Cookie 總數(shù)作出絕對(duì)限制，通常為 300 個(gè)。
Cookie默認(rèn)情況都會(huì)隨著Http請(qǐng)求發(fā)送到后臺(tái)服務(wù)器，但并不是所有請(qǐng)求都需要Cookie的，比如：js、css、圖片等請(qǐng)求則不需要Cookie。
為了破解Cookie的一系列限制，HTML5通過(guò)JS的新的API就能直接存儲(chǔ)大量的數(shù)據(jù)到客戶端瀏覽器，而且支持復(fù)雜的本地?cái)?shù)據(jù)庫(kù)，讓JS更有效率。 HTML5支持兩種的WebStorage：
永久性的本地存儲(chǔ)（localStorage）
會(huì)話級(jí)別的本地存儲(chǔ)（sessionStorage）
二、本地存儲(chǔ)的分類
H5本地存儲(chǔ)有兩個(gè)API，一個(gè)是Web Storage，還有一個(gè)是Web SQL。不管是哪一個(gè)，都是基于JavaScript語(yǔ)言來(lái)使用，接下來(lái)我就教你怎么使用Web Storage
三、Web Storage
HTML5 定義了本地存儲(chǔ)規(guī)范 Web Storage ， 提供了兩種存儲(chǔ)類型 API： sessionStorage 和 localStorage，二者的差異主要是數(shù)據(jù)的保存時(shí)長(zhǎng)及數(shù)據(jù)的共享方式。
1.localStorage 一直存儲(chǔ)在本地，數(shù)據(jù)存儲(chǔ)是永久的，除非用戶或程序?qū)ζ溥M(jìn)行刪除操作；localStorage 對(duì)象存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。&
