浅谈浏览器的本地存储

一、本地存储是干嘛用的？

开发过程中当我用刷新页面时，页面的数据会被清空，为了保存我们需要的信息，浏览器给我们提供cookie，localStorage和sessionStorage这三个方法来把信息保存到浏览器本地存储中，防止刷新页面清空数据。

在浏览器的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
生命周期	可以设置过期时间，不设置，默认情况关闭浏览器就自动清除	除非手动清除，否则永久保存	只在当前页面有效，关闭页面或浏览器会自动清除
存放数据大小	能存4KB左右，各浏览器的cookie存储大小和个数限制也不一样	可以保存5MB的信息	可以保存5MB的信息
http请求	cookie可以参与通信，但如果使用cookie保存过多数据会带来性能问题	不参与服务端的通信	不参与服务端的通信
易用性	对开发者来说并不友好，要手动封装	浏览器提供源生的API,也可以二次封装	浏览器提供源生的API也可以二次封装

最后

这三个东西虽然好用，但是安全性低，重要的信息还是保存到数据库吧。