緩存機制
緩存機制.jpeg
一個栗子
image.png
--Cache-Control: max-age=0 緩存 可是時效為0
--Cache-Control: no-cache 緩存 可是時效為0
--Cache-Control: no-store 不緩存
離線存儲
--Session Storage：作用域只在一個會話中，也就是一個tap頁中。關閉當前tap頁，作用域隨之消失
--Local Storage：作用域可在多個會話中，也就是多個tap頁中，多個tap頁可以共性數據。關閉tap頁，作用域？
Session Storage的使用場景：表單回顯
//在填寫表單時，不小心刷新了頁面不至于數據丟失。
<body>
<input type="text" id="text" />
</body>
<script>
window.onload = function(){
var text = document.querySelector("#text");
//在頁面刷新后，將上次input的值顯示到文本框中
var val = sessionStorage.getItem("val");
if(val){
text.value = val;
}
//input輸入事件：將input中的值保存到sessionStorage中
text.addEventListener("input",function(){
sessionStorage.setItem("val",text.value);
})
}
</script>
Local Storage的使用場景：多個tap頁共享數據
/*在購物時，打開了多個tap頁，每個tap選擇了不同的商品，
這時需要共享數據功能才能實現每個tap選擇的商品是一致的狀態*/
