3-1、在瀏覽器上儲存資料

# 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 、監聽事件，接下來就是資料交換。 ---