---
# System prepended metadata

title: 3-1、 在瀏覽器上儲存資料
tags: [Lidemy心得, 2020九月第一周, FE102, HTML+CSS, 進度筆記]

---

# 3-1、 在瀏覽器上儲存資料
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/05  

## 網頁的資料存在哪 ?
- HTTP 的狀態是靜止的，不知道現在的 USER 和上一個 USER 發送的 Request 差別。  
- 瀏覽器一定有一個地方存資料，因此要有方法把資料自動帶到 Server 端去。  
- 例如購物車的資料存在 A 電腦，換一台電腦資料就不見了，而不是存在 Server 端。  

***

# 3-2、 儲存的第一站 - Cookie
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/05  

## 其實就是小型文字檔
- 可以自動帶到 Server 端。  
- 可以寫 JS 把資料寫到 Cookie 。  
- Server 端也可以透過 HTTP 的 Response 把資料寫到 Cookie 。  

    - Server 的 Response 內的 Header 有個 `Set-Cookie: ` 這會放些資訊。   
    - 為了讓瀏覽器辨識身分，例如用在廣告追蹤。   
    
## Cookie 也會記住 User 

==因此可以用在身分驗證上。==  
如: 
```
User A 發出 Request → 登入
A → 第一次登入 → Server  
A → 第二次登入 → Server 

Server 要怎麼知道剛剛登入跟現在登入的是同個 User ?  
```
- Server 會在第一次登入的時候給 A 通行證 (放在 Cookie 內)。  
- 每個 Request 發到 Server ， 瀏覽器都會幫你附上 Cookie 。  
- 可以打開 dev tool 去看到底存了甚麼 Cookie。  

![](https://i.imgur.com/TCeT3f5.png)
火狐瀏覽器的 dev tool 。  

- 瀏覽器會把現在這個 Domain 相關的 Cookie 帶上去。  

***
參考資料:  
[HTTP cookies - HTTP | MDN](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwih9M2V5PzrAhXdxIsBHZdvDfcQFjABegQIChAE&url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-TW%2Fdocs%2FWeb%2FHTTP%2FCookies&usg=AOvVaw3rrAp4Cs_vGaSisYshN8ZM)  

[解釋Cookie 的特性| The Will Will Web](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwih9M2V5PzrAhXdxIsBHZdvDfcQFjACegQIBhAB&url=https%3A%2F%2Fblog.miniasp.com%2Fpost%2F2008%2F02%2F22%2FExplain-HTTP-Cookie-in-Detail&usg=AOvVaw1AvUBzcn0tkKJQTWDyPYYM)  

[[筆記] HTTP Cookies 和Session 使用. HTTP 是一個「無狀態 ...](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwih9M2V5PzrAhXdxIsBHZdvDfcQFjADegQIAxAB&url=https%3A%2F%2Fmedium.com%2F%25E9%25BA%25A5%25E5%2585%258B%25E7%259A%2584%25E5%258D%258A%25E8%25B7%25AF%25E5%2587%25BA%25E5%25AE%25B6%25E7%25AD%2586%25E8%25A8%2598%2F%25E7%25AD%2586%25E8%25A8%2598-http-cookie-%25E5%2592%258C-session-%25E4%25BD%25BF%25E7%2594%25A8-19bc740e49b5&usg=AOvVaw1waINnYQ3-bStLGLxLhAfP)  

[[不是工程師] Cookie 是文檔還是餅乾？簡述HTTP網頁紀錄會員 ...](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwih9M2V5PzrAhXdxIsBHZdvDfcQFjAGegQIBBAB&url=https%3A%2F%2Fprogressbar.tw%2Fposts%2F91&usg=AOvVaw1xW9lOgx8es3IsT3zEz96C)  

---

# 3-3、 儲存東西最好的地方 - 自宅倉庫
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/05  

## Local Storage  
- 在瀏覽器儲存資訊。  
把輸入文字按儲存就會儲存到 Local Storage 內，並希望重新整理的時候能拿出值，存成 .html 格式:  
```
<!DOCTYPE HTML>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>瀏覽器上執行 JS</title>
  <style>

  </style>
</head>
<body>
  <div class='app'>
    <input class="text" />
    <button>儲存</button>
  </div>
  <script>

    const oldValue = window.localStorage.getItem('text')
    document
    .querySelector('.text')
    .value = oldValue

  	document
  	.querySelector('button')
  	.addEventListener('click', function() {
  	  const value = document.querySelector('.text').value
  	  window.localStorage.setItem('text', value)
  	})
  </script>
</body>
</html>


```
- 重新整理的時候會把儲存好的文字帶出來。  
- `const value = document.querySelector('.text').value` 可以拿到值。  
- ``window.localStorage.set('')`` 儲存到本地， window. 可加可不加，都是 window 瀏覽器的全域物件所提供，有 Key&Value 。  
- 而 Value 只能存字串，而能存字串就能存很多東西，如: 用 `JSON.parse(JSON.stringify(objArray))` 轉物件存進去，再用 `JSON.stringify(objArray)` 拿出來。  

![](https://i.imgur.com/3M5cZ5w.png)  

- 有些網站很貼心，表單填一填不小心回到上一頁，再回來資料仍在，可能就是用了 localStorage 。  

***
參考資料:  
[Window.localStorage - MDN Web Docs - Mozilla](https://developer.mozilla.org/zh-TW/docs/Web/API/Window/localStorage)  

[`Window.sessionStorage`](https://developer.mozilla.org/zh-TW/docs/Web/API/Window/sessionStorage)  

---

# 3-4、 儲存東西最好的地方 - 賞味期限篇  
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/05  

==- 存活時間比較短，可能關掉分頁、網頁和瀏覽器後就消失了。==  

---

## Session Storage  

用法跟 Local Storage 一樣，將 3-3 的 ``window.localStorage.getItem('text')`` 更動:  
```
<script>

    const oldValue = window.sessionStorage.getItem('text')
    document
    .querySelector('.text')
    .value = oldValue

  	document
  	.querySelector('button')
  	.addEventListener('click', function() {
  	  const value = document.querySelector('.text').value
  	  window.localStorage.setItem('text', value)
  	})
  </script>
```
- 不同 tab 沒辦法共用同個 sessionStorage 。  
- sessionStorage 只存在這個分頁開啟下，關掉就沒了。  
- 存一些沒有想要長期保留的資訊。  

***
參考資料:  
[Window.sessionStorage - MDN Web Docs - Mozilla](https://developer.mozilla.org/zh-TW/docs/Web/API/Window/sessionStorage)  

[重要的基礎：Cookie v.s Session Storage v.s Local Storage ...](https://medium.com/@brianwu291/cookie-sessionstorage-localstorage-and-cookie-based-token-based-authentication-da7af80ec00d)  

[[JavaScript\] Cookie、LocalStorage、SessionStorage 三種差異](https://medium.com/@jscinin/javascript-cookie-localstorage-sessionstorage-%E4%B8%89%E7%A8%AE%E5%B7%AE%E7%95%B0-fe7f38260439)  

[Day20 localStorage、sessionStorage - iT 邦幫忙 - iThome](https://ithelp.ithome.com.tw/articles/10203525)  

***

# 3-5、 學習這些的用途
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/06

- 發揮想像力做出來可以改變 UI 、 監聽事件的網頁元素，只要是沒有跟網路有關的做得出來。  

- 欠缺網路交換的相關資訊，但表單驗證，或是像是遊戲 (2048) ， 比較大的 APP 也是用基礎堆出來。  

## 資料交換的部分

- 已經學了改變 UI 、 監聽事件，接下來就是資料交換。  

---