## <font class="h2">Local Storage及session Storage</font>

###### tags: `javascript`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>

### <font class="h4">➤Localstorage</font>
localstorage: 瀏覽器裡面的資料庫

==將資料從頁面中的程式碼儲存到Web瀏覽器的儲存空間當中==。如此一來，本來存入程式碼當中的資料，就不會因重新整理頁面或者關閉瀏覽器而消失。
<br>

### 使用範例:
<br>


<br><br><br>

### <font class="h4">➤Web Storage 物件</font>
在 HTML5 問世之前，我們只能將小筆的資料儲存在cookies當中。
在 HTML5 問世之後， Web storage 提供了一個更加安全且容量更大的本地端儲存空間，除此之外也不會影響到網頁的效能。

| Web Storage類型| 生命週期 | 有效範圍 |
| ----------- | -------- | -------- |
|localStorage | 執行刪除指令才會消失 |同一網站的網頁可跨視窗級分頁|
| sessionStorage| 瀏覽器視窗或分頁關閉就會消失|只對當前瀏覽器視窗或分頁有效|

<br><br><br><br>

| 語法 | 說明 |
| ------------------------------- | ---- |
| `Storage.setItem('key', 'value') `|可以在 storage 物件中加入屬性或修改原本的屬性內容。 |
| `Storage.getItem('key') ` |取得到 storage 物件對應的屬性 value 。|
| `Storage.key()` |取得storage 物件中該位置的屬性 key，此順序位置如陣列一樣，由0開始。|
| `Storage.removeItem() ` |指定的屬性從storage 物件中移除|
| `Storage.clear()` |把storage 中的所有屬性移除 |

<br><br><br><br>

### <font class="h4">➤如何找到儲存的資料</font>
<br>

<br><br><br><br>

### <font class="h3">localstorage只能儲存字串</font>

let players = {
    player1:'Mike',
    player2:'John',
    player3:'Cathy'
}

localStorage.setItem('playerList',players)


==所以須將物件資料先轉為字串==

==使用`JSON.stringify()`將資料轉為 JSON 格式的字串==

let players = {
    player1:'Mike',
    player2:'John',
    player3:'Cathy'
}

localStorage.setItem('playerList',JSON.stringify(players))

<br><br>

==再使用`JSON.parse()`將資料由 JSON 格式字串轉回原本的資料內容及型別。==

JSON.parse(localStorage.getItem('playerList'))


<br><br><br><br>

### <font class="h4">➤範例一:</font>

let string = 'testString'
let number = 12345;
let array = ['asd', 123, true];
let object = {test:1};

localStorage.setItem('item', string);
localStorage.setItem('item2', number);
localStorage.setItem('item3', array);
localStorage.setItem('item4', object);

console.log(localStorage.getItem('item'));
console.log(localStorage.getItem('item2'));
console.log(localStorage.getItem('item3'));
console.log(localStorage.getItem('item4'));


==`getItem()`得到的值會全部被轉為字串==
<br><br><br><br>

使用`JSON.stringify()`將資料轉為 JSON 格式的字串
再使用`JSON.parse()`將資料由 JSON 格式字串轉回原本的資料內容及型別。

let string = 'testString'
let number = 12345;
let array = ['asd', 123, true];
let object = {test:1};

localStorage.setItem('item', JSON.stringify(string));
localStorage.setItem('item2', JSON.stringify(number));
localStorage.setItem('item3', JSON.stringify(array));
localStorage.setItem('item4', JSON.stringify(object));

console.log(JSON.parse(localStorage.getItem('item')));
console.log(JSON.parse(localStorage.getItem('item2')));
console.log(JSON.parse(localStorage.getItem('item3')));
console.log(JSON.parse(localStorage.getItem('item4')));

<br><br><br><br>

### <font class="h4">➤範例二:</font>

<h2>請輸入你的名字</h2>
<input type="text" class="textClass">
<input type="button" class="btnClass" value="儲存">
<input type="button" class="btnCall" value="呼叫名字">

const btn = document.querySelector('.btnClass')
const call = document.querySelector('.btnCall')

btn.addEventListener('click', saveName)
call.addEventListener('click', callName)

function saveName() {
  let str = document.querySelector('.textClass').value
  localStorage.setItem('myName', str)
}

function callName() {
  let str = localStorage.getItem('myName')
  alert('你的名字叫做' + str)
}

<br><br><br><br>

### <font class="h4">➤todolist範例</font>

<div class="wrap clearfix">
  <div class="img">
    <img class="logo" src="images/logo.svg">
  </div>
  <div class="content">
    <div class="addList">
      <input type="text" class="text" placeholder="請填寫代辦內容" required>
      <input type="button" class="send" value="加入代辦">
    </div>
    <ul class="list"></ul>
  </div>
</div>