localStorage和sessionStorage區別和使用

一、什麼是localStorage

在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作爲本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k)，localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中localStorage會有所不同。

二、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的不同點和相同點

相同：

1.操作方法都是一樣

setItem('myCat', 'Tom'); //增加， 或者改
getItem('myCat'); // 查
removeItem('myCat'); // 刪
clear(); // 移除全部

2.儲存方式：鍵值對總是以字符串的形式存儲。 (需要注意, 和js對象相比, 鍵值對總是以字符串的形式存儲意味着數值類型會自動轉化爲字符串類型).

不同：

1.生命週期不同:localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空（所以有些時候sessionStorage會用來儲存用戶的賬號和密碼）

2.作用域不同：當相同瀏覽器，相同協議，域名，端口的情況下：不用的Tabs頁面（俗話：打開相同的好幾個頁面），localStorage數據是共享的，sessionStorage是不共享的

這裏我們以localStorage使用方法來分析

兼容

IE8.0+

寫入（增）

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類型的存儲

讀取（查）

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);
}

其中官方推薦的是getItem\setItem這兩種方法對其進行存取

改

直接改就OK了

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);
}

刪除

分2個情況 1.全部刪除 2.刪除某一個字段

1.全部刪除 clear()

var storage = window.localStorage;
storage.a = 1;
storage.setItem("c", 3);
console.log(storage);
storage.clear();
console.log(storage);

2.刪除某一個鍵值對 removeItem()

var storage = window.localStorage;
storage.a = 1;
storage.setItem("c", 3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);

獲取鍵 

key(),向其中出入索引即可獲取對應的鍵

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);
}

四、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);