HTML_本地存儲

在HTML5當中，新增了不少的存儲方式，這裏我先介紹兩種，方便咱們的使用和操做，具體新加入了一個localStorage特性，這個特性主要是用來做爲本地存儲來使用的，解決了cookie存儲空間不足的問題,localStorage中通常瀏覽器支持的是5M大小，這個在不一樣的瀏覽器中localStorage會有所不一樣。而這個localStorage在哪找到的呢？

如上圖所示，咱們能夠經過瀏覽器的F12按鈕打開控制檯，接着點擊Application,下面就有五個儲存方式，固然，Cookies是咱們以前所使用的，可是缺點是空間不夠大，因此新增了其餘的儲存方式，這裏咱們主要講的是localStorage，順便把SessionStorage也說了。

localStorage的優點

1. localStorage拓展了cookie的4K限制
2. localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的

localStorage的侷限

1. 瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性
2. 目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換
3. localStorage在瀏覽器的隱私模式下面是不可讀取的
4. localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡
5. localStorage不能被爬蟲抓取到

 

區別：

localStorage與sessionStorage的惟一一點區別就是:localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空

 

而後咱們先來認識操做這個數據庫的一下方法

• 判斷window是否支持localStorage
  • window.localStorage
• 設置鍵值對
  • localStorage.setItem(key,val);
• 獲取值
  • localStorage.getItem(key);//只能輸入鍵，獲取值
• 刪除鍵值對
  • localStorage.clear();
• 獲取值
  • localStorage.key(i)
• 訪問頁面次數
  • localStorage.pagecount

作了一個小小的實例：https://github.com/Itdansan/Storage 但願能幫助到你們(代碼中相應的註釋也標註了)

註釋:sessionStorage和localStorage的區別僅僅是存儲時間的問題，而功能，方法和實現原理，都和localStorage同樣，所以，和localStorage的方法同樣的！

 

（完）！