浏览器中的缓存方式
2019-03-08 本文已影响0人
GoFzy
一、Cookie、Session Storage与Local Storage
HTTP 很重要的一个特点就是无状态（每一次见面都是“初次见面”），如果单纯的希望通过我们的服务端程序去记住每一个访问者是不可能的，所以必须借助一些手段或者说技巧让服务端记住客户端，这种手段就是 Cookie。不过由于cookie存储机制有很多缺点，因此最新HTML5中采取了Web Storage存储机制（分为两种：sessionStorage和localStorage），我们可以将其看作是对HTML4中Cookie存储机制的一个改善，这里我进行了一个简要的总结。
存储机制的比较
二、基于Cookie的猜字游戏
这是根据Cookie和Session特性做的一个猜字小游戏，大家可以来试试，不过前提是要配置一下web服务器和php扩展
https://github.com/GoFzy/Guess_Number
三、Session Storage与Local Storage之间的比较
sessionStorage 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Storage 示例</title>
</head>
<body>
<h1>Web Storage 示例</h1>
<p id="msg"></p>
<input type="text" id="input" />
<input type="button" value="保存数据" onclick="saveStorage('input');" />
<input type="button" value="读取数据" onclick="loadStorage('msg');" />
</body>
</html>
<script>
//sessionStorage 示例 (保存一个会话周期:从打开浏览器——到关闭浏览器窗口)
function saveStorage(id) {
var target = document.getElementById(id);
var str = target.value;
sessionStorage.setItem("message", str);
}
function loadStorage(id) {
var target = document.getElementById(id);
var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}
localStorage 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Storage 示例</title>
</head>
<body>
<h1>Web Storage 示例</h1>
<p id="msg"></p>
<input type="text" id="input" />
<input type="button" value="保存数据" onclick="saveStorage('input');" />
<input type="button" value="读取数据" onclick="loadStorage('msg');" />
</body>
</html>
<script>
//localStorage 示例(可永久保存)
function saveStorage(id) {
var target = document.getElementById(id);
var str = target.value;
localStorage.setItem("message", str);
}
function loadStorage(id) {
var target = document.getElementById("msg");
var msg = localStorage.getItem("message");
target.innerHTML = msg;
}
</script>
每次输入数据并保存后马上关闭页面，重新打开页面后点击读取数据就可以发现两者的区别
