用localStorage和sessionStorage來儲存資料
阿新 • • 發佈：2019-01-06
在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地儲存來使用的，解決了cookie儲存空間不足的問題(cookie中每條cookie的儲存空間為4k)，localStorage中一般瀏覽器支援的是5M大小，這個在不同的瀏覽器中localStorage會有所不同。
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中的鍵值對會被清空
localStorage與sessionStorage具有相同的API，以下方法都可以用於sessionStorage
localStorage儲存方法（3種方式均可）：
localStorage.name ='ligaofeng';
localStorage["name"]='ligaofeng';
localStorage.setItem("name","ligaofeng");
localStorage獲取值方法（3種方式均可）：
var name = localStorage["name"]
var name= localStorage.name
var name＝ localStorage.getItem("name");
localStorage清除特定值方法：
localStorage.removeItem("name");//清除name的值
localStorage.name＝'';
localStorage清除所有值方法：
localStorage.clear()
localStorage只能儲存字串，如果需要儲存物件，首先要轉化為字串。利用JSON.stringify()；
var person = {name:"ligaofeng","sex":"man","age":31};
localStorage.setItem("person",JSON.stringify(person));
或 localStorage.person="{"name":"ligaofeng","sex":"man","age":31}"
然後取出person的物件你可以用JSON.parse();
person = JSON.parse(localStorage.getItem("person"));