浅谈浏览器的本地存储

本地存储是干嘛用的？

在浏览器的Application查看

cookie的基本使用

document.cookie = 'lgf' // 存储cookie
console.log(document.cookie) // 获取cookie

如果想更灵活的操作cookie，可以把cookie的保存，读取，删除封装成方法来调用

设置cookie

function setCookie(key, value, t) {
    var oDate = new Date();  //创建日期对象
    oDate.setDate( oDate.getDate() + t ); //设置过期时间
    document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();  //设置cookie的名称，数值，过期时间
}

// 使用方法：setCookie(cookie名称，cookie数值，过期时间（天）)
setCookie('sex','男', 10);

获取cookie的单个数值

function getCookie(key) {
    var arr1 = document.cookie.split('; '); //将cookie按“; ”分割，数组元素为： cookie名=cookie值
    for (var i=0; i<arr1.length; i++) {  //分割数组里的每个元素
        var arr2 = arr1[i].split('='); //按照“=”分割
        if ( arr2[0] == key ) { //如果数组的第一个元素等于给定的cookie名称
            return decodeURI(arr2[1]);  //返回翻译编码后的cookie值
        }
    }
}

// 使用方法：getCookie(cookie名称)
getCookie('username');

删除cookie

function removeCookie(key) {
    setCookie(key, '', -1);  //cookie的过期时间设为昨天,浏览器会自动删除cookie
}

// 使用方法：removeCookie(cookie名称)
removeCookie('age');

localstorage和sessionStorage的基本使用

localstorage和sessionStorage的基本使用是差不多的改一下名称就好

sessionStorage.setItem(name,value);//存储数据
sessionStorage.valueOf();//获取全部数据
sessionStorage.getItem(name);//获取指定键名数据
sessionStorage.removeItem(name); //删除指定键名数据
sessionStorage.clear();//清空缓存数据

就这几行代码保存基本数据类型基本够用了，如过要保存对象数组这需要转换一下数据类型才行

sessionStorage.setItem(name,JSON.stringfy(value)); //存储数据
sessionStorage.getItem(JSON.parse(name));

也可以把localstorage，sessionStorage封装一下，比如数据加密什么的，它更好用，这里就不做操作了

三者的异同

生命周期：

cookie:可以设置过期时间，不设置，默认情况关闭浏览器就自动清除

localStorage: 除非手动清除，否则永久保存

sessionStorage: 只在当前页面有效，关闭页面或浏览器会自动清除

存放数据大小：

cookie: 能存4KB左右，各浏览器的cookie存储大小和个数限制也不一样

localStorage和sessionStorage： 可以保存5MB的信息

http请求：

cookie: 每次请求，请求头中都会携带cookie,如果使用cookie保存过多数据会带来性能问题

localStorage和sessionStorage: 仅保存在客户端浏览器中，不参与服务端的通信

易用性：

cookie: 通过上面的使用方法就知道，对开发者来说并不友好，要手动封装

localStorage和sessionStorage：源生的接口可以接受，我们也可再次封装来对Object和Array有更好的支持

最后