浏览器本地存储有三种：cookie、localStorage和sessionStorage。三种个有优缺点，下面我将会一一介绍。

浏览器本地存储

cookie

        本来啊，我想详细的说说cookie的，当没想到我查资料的时候找到了非常详细的网站：cookies。这里介绍的非常详细了，不仅介绍了cookie还封装了取值、赋值和检测 cookie 是否创建三个函数。
        我需要补充的是，你看完会发现好像没有删除cookie，但其实是有的，赋值的时候有一个设置时间的参数，只需要传参的时候传0即可立马删除。
我把他封装的函数放这里，不想看理论的直接复制即可

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    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!=""){
        return false
    }
    else {
        return true
    }
}

localStorage

        对于localStorage，在localstorage里也是介绍得十分详细。并且与sessionStorage进行比较
我提取几点重要的内容：
1、localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
2、localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。
3、容量统一为5M
4、兼容ie8？当你阅读完后，你发现兼容ie8！但是，我去测试发现，ie直接报错，不管是ie几。
文档关于如何设置值好像并没提，所以关于如何使用localStorage请看下列代码

// 设置值
window.localStorage.setItem("localStorage", 123);//文档是这样设置一个值
localStorage.setItem("localStorage", 123);//这样设置一个值也不报错
// 获取值
localStorage.getItem("localStorage");
// 删除
localStorage.removeItem("localStorage"); // 删除一个
localStorage.clear(); // 删除全部

sessionStorage

1、sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下，就能读取/修改到同一份localStorage数据。
2、sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
3、容量统一为5M
4、兼容ie8？当你阅读完后，你发现兼容ie8！但是，我去测试发现，ie直接报错，不管是ie几。
下列是关于sessionStorage的使用

// 设置值
window.sessionStorage.setItem("sessionStorage", 123);//文档是这样设置一个值
sessionStorage.setItem("sessionStorage", 123);//这样设置一个值也不报错
// 获取值
sessionStorage.getItem("sessionStorage");
// 删除
sessionStorage.removeItem("sessionStorage"); // 删除一个
sessionStorage.clear(); // 删除全部

关于sessionStorage和localStorage最大的区别就是：保存时间，localStorage是永久！sessionStorage关闭窗口就没了！

总结

cookie：可以设置过期时间这很有用。但取值没有其他两个方便，需要些函数去取值就很麻烦
localStorage：可以永久保存，很多静态资源可以存到本地，以减少服务器的压力。由于不能设置过期时间，需要开发者写删除。
sessionStorage：用于临时存储，由于浏览器关闭就被删除了，所以不用担心垃圾文件占内存。