localStorage使用總結
1、什麼是localStorage、sessionStoragejavascript
在HTML5中，新加入了一個localStorage特性，這個特性主要是用來做爲本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k)，localStorage中通常瀏覽器支持的是5M大小，這個在不一樣的瀏覽器中localStorage會有所不一樣。html
2、localStorage的優點與侷限前端
localStorage的優點vue
一、localStorage拓展了cookie的4K限制java
二、localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的node
localStorage的侷限jquery
一、瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性git
二、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換程序員
三、localStorage在瀏覽器的隱私模式下面是不可讀取的github
四、localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡
五、localStorage不能被爬蟲抓取到
localStorage與sessionStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空
這裏咱們以localStorage來分析
3、localStorage的使用
localStorage的瀏覽器支持狀況：
這裏要特別聲明一下，若是是使用IE瀏覽器的話，那麼就要UserData來做爲存儲，這裏主要講解的是localStorage的內容，因此userData不作過多的解釋，並且以博主我的的見解，也是沒有必要去學習UserData的使用來的，由於目前的IE6/IE7屬於淘汰的位置上，並且在現在的不少頁面開發都會涉及到HTML5\CSS3等新興的技術，因此在使用上面通常咱們不會去對其進行兼容
首先在使用localStorage的時候，咱們須要判斷瀏覽器是否支持localStorage這個屬性
if(！window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
//主邏輯業務
}
localStorage的寫入，localStorage的寫入有三種方法，這裏就一一介紹一下
if(！window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//寫入a字段
storage["a"]=1;
//寫入b字段
storage.a=1;
//寫入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
運行後的結果以下：
這裏要特別說明一下localStorage的使用也是遵循同源策略的，因此不一樣的網站直接是不能共用相同的localStorage
最後在控制檯上面打印出來的結果是:
不知道各位讀者有沒有注意到，剛剛存儲進去的是int類型，可是打印出來倒是string類型，這個與localStorage自己的特色有關，localStorage只支持string類型的存儲。
localStorage的讀取
if(!window.localStorage){
alert("瀏覽器支持localstorage");
}else{
var storage=window.localStorage;
//寫入a字段
storage["a"]=1;
//寫入b字段
storage.a=1;
//寫入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
//第一種方法讀取
var a=storage.a;
console.log(a);
//第二種方法讀取
var b=storage["b"];
console.log(b);
//第三種方法讀取
var c=storage.getItem("c");
console.log(c);
}
這裏面是三種對localStorage的讀取，其中官方推薦的是getItem\setItem這兩種方法對其進行存取，不要問我這個爲何，由於這個我也不知道
我以前說過localStorage就是至關於一個前端的數據庫的東西，數據庫主要是增刪查改這四個步驟，這裏的讀取和寫入就至關於增、查的這兩個步驟
下面咱們就來講一說localStorage的刪、改這兩個步驟
改這個步驟比較好理解，思路跟從新更改全局變量的值同樣，這裏咱們就以一個爲例來簡單的說明一下
if(!window.localStorage){
alert("瀏覽器支持localstorage");
}else{
var storage=window.localStorage;
//寫入a字段
storage["a"]=1;
//寫入b字段
storage.b=1;
//寫入c字段
storage.setItem("c",3);
console.log(storage.a);
// console.log(typeof storage["a"]);
// console.log(typeof storage["b"]);
// console.log(typeof storage["c"]);
/*分割線*/
storage.a=4;
console.log(storage.a);
}
這個在控制檯上面咱們就能夠看到已經a鍵已經被更改成4了
localStorage的刪除
一、將localStorage的全部內容清除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
二、 將localStorage中的某個鍵值對刪除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
控制檯查看結果
localStorage的鍵獲取
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
使用key()方法，向其中出入索引便可獲取對應的鍵
4、localStorage其餘注意事項
通常咱們會將JSON存入localStorage中，可是在localStorage會自動將localStorage轉換成爲字符串形式
這個時候咱們可使用JSON.stringify()這個方法，來將JSON轉換成爲JSON字符串
示例：
if(!window.localStorage){
alert("瀏覽器支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
讀取以後要將JSON字符串轉換成爲JSON對象，使用JSON.parse()方法
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//將JSON字符串轉換成爲JSON對象輸出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
打印出來是Object對象
另外還有一點要注意的是，其餘類型讀取出來也要進行轉換