JS趴趴往上走-localStorage

Web Storage

Web Storage是一種能在HTML5中能讓網頁資料儲存於本地端的技術，使用key / value pair的方式 給值或取值，其作用和cookie很像，相起cookie只有4KB的儲存空間，Web Storage擁有5MB空間，但是只有高版本的瀏覽器才能支持，只能儲存字串


Web Storage分為兩種:
1.localStorage
2.sessionStorage
其主要差異儲存在localStorage的資料可以一直保存，即使關閉視窗或者分頁，資料依然不會消失;反之sessionStorage則是只要關閉瀏覽器或者分頁資料就會消失

localStorage的使用

存儲Storage:
新增/更新資料

//'mylocal'為key,hi為你要儲存的value
localStorage.setItem('mylocal', 'hi');

產生的結果就像下面那張圖

讀取Storage:
讀取存放在localStorahe的資料

//取得存放在mylocal鍵值的value
localStorage.getItem("mylocal")

刪除Storage:
刪除資料

//刪除存放於key(mylocal)和value
localStorage.removeItem('mylocal');

全部刪除:

//localStorage內的key/vlaue全部清空
localStorage.clear();

將JSON存儲到localStorage裏

上面有提到儲存在Web Storage內的值只能是字串，當你使用其他型別存資料，使用getItem取資料你會發現都會變成字串(String)

var test=124;
var test2='hiiii';
var test3=true;
var test4=[5,6,7,'hoo'];
var test5={a:124,b:'yoooo'}

localStorage.setItem('mylocal', test);
localStorage.setItem('mylocal2', test2);
localStorage.setItem('mylocal3', test3);
localStorage.setItem('mylocal4', test4);
localStorage.setItem('mylocal5',test5);

console.log(localStorage.getItem("mylocal")); //124
console.log(localStorage.getItem("mylocal2"));//hiii
console.log(localStorage.getItem("mylocal3"));//true
console.log(localStorage.getItem("mylocal4"));//5,6,7,hoo
console.log(localStorage.getItem("mylocal5"));//[object Object]

//使用typeof查型別:
console.log(typeof(localStorage.getItem("mylocal"))); //string
console.log(typeof(localStorage.getItem("mylocal2")));//string
console.log(typeof(localStorage.getItem("mylocal3")));//string
console.log(typeof(localStorage.getItem("mylocal4")));//string
console.log(typeof(localStorage.getItem("mylocal5")));//string

尤其使用object，返回的值都變成object字，這時就可以使用JSON.stringify，先在JSON轉成字串在存放進去，取出來的值就是JSON樣式

var test5=[
    {
     a:124,
     b:'yoooo'
    },
    {
     a:555,
     b:'hooooo'
    }
]
localStorage.setItem('mylocal5',JSON.stringify(test5));

console.log(localStorage.getItem("mylocal5"));//[{"a":124,"b":"yoooo"},{"a":555,"b":"hooooo"}]

但若你想取出來的是陣列的話則是使用JSON.parse

var test5=[
    {
     a:124,
     b:'yoooo'
    },
    {
     a:555,
     b:'hooooo'
    }
]
//轉成字串
localStorage.setItem('mylocal5',JSON.stringify(test5));

//轉成陣列
console.log(JSON.parse(localStorage.getItem("mylocal5")));

最後複習:

• Web Storage有兩種:localStorage和sessionStorage
• 想在一個key值存取多個值要使用array
• 想把陣列轉成字串:JSON.stringify;想把字串轉成陣列:JSON.parse