前端存储有localStorage、sessionStorage、cookie三种方式。
那么它们各自的缓存方法是如何实现的呢？本文将以cookie为主来实现缓存方法。
一、cookie
document.cookie 属性看起来像一个普通的文本字符串，其实它不是。读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。
1）cookie的设置
关于过期时间：默认情况下，cookie 在浏览器关闭时删除；
关于路径：默认情况下，cookie 属于当前页面。（cookie的另一属性domain是对应服务器的，服务器下面包含路径）
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
2）读取cookie
var myCookie = document.cookie;
3）修改cookie
修改 cookie 类似于创建 cookie，旧的cookie将被覆盖。
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
4）删除cookie
只需要设置 expires 参数为以前的时间即可。
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
cookie创建、读取和展示的完整实例方法实现见下（有参考）。
function setCookie(cname,cvalue,exdays){var d = new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000)); // 得到GMT时间var expires = "expires="+d.toGMTString();document.cookie = cname+"="+cvalue+"; "+expires;}function getCookie(cname){var name = cname + "=";var ca = document.cookie.split(';');for(var i=0; i<ca.length; i++) {var c = ca[i].trim();if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }}return "";}function checkCookie(){var user=getCookie("username");if (user!=""){alert("欢迎 " + user + " 再次访问");}else {user = prompt("请输入你的名字:","");if (user!="" && user!=null){setCookie("username",user,30);}}}
二、sessionStorage、localStorage
两者类似，下面仅以localStorage为例说明。
localStorage本质上是对字符串的读取，有Json格式时需要JSON.stringify()转化为字符串。
1）存储数据
localStorage.setItem('key', 'value');
2）读取数据
localStorage.getItem('key');
3）删除数据
localStorage.removeItem('key');
4）更改数据
localStorage.setItem('key', 'newValue');
