web前端快取之三sessionStorage
阿新 • • 發佈：2019-02-19
看了前兩篇的童鞋都知道，每個快取的api都有它的優缺點，希望大家能夠在看完這個web前端快取系列之後，能夠幫助大家在專案開發中能夠合理的使用每一個api
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- sessionStorage：臨時儲存器，將資料存到 session中，管你前進後退還是重新整理，資料依然在，關閉瀏覽器後再進頁面才會清空資料--> <a href="index.html">跳轉到index介面</a> <button id="cacheData">儲存資料</button> <button id="findData">取資料</button> <script type="text/javascript"> let findId = id => document.getElementById(id); let cacheDataBtn = findId("cacheData"); let findDataBtn = findId("findData"); cacheDataBtn.onclick = () =>{ alert("儲存資料"); sessionStorage.setItem("password","123456789"); }; findDataBtn.onclick = () =>{ let password = sessionStorage.getItem("password"); alert("取資料:"+password) }; </script> </body> </html>