html 数据存储（cookie、localStorage）

html数据存储的方式有cookie、localStorage、sessionStorage，本文主要讲解cookie和localStorage存储数组

1、localStorage，如果不手动清除或者清除缓存，存储的值会一直保留

1.1、localStorage存储数组

var arr = ["01", "18", "20", "22", "27", "30"];//创建数组并初始化
var str = JSON.stringify(arr);//将数组转换成json字符串
localStorage.setItem('data',str);//存储

1.2、localStorage获取内容

var str = localStorage.getItem('data');//根据key值获取localStorage存储的值，此时是json字符串
var arr =JSON.parse(str);//把json字符串转换成对象

1.3、删除localStorage存储的内容

localStorage.removeItem('data');//根据key值删除localStorage存储的内容
localStorage.clear();//清除所有的localStorage存储的内容

2、cookie

2.1、cookie存储数组

第一种设置过期时间

//cookie存储 key 存储的key值 ；value 要存储的内容；dateTime 存储的时间（过期时间）
function setCookie(key, value, dateTime) {
    var days = dateTime; //设置日期为多少天
    var exp = new Date();
    var d = new Date();
    var time = "" + d.getFullYear() + (d.getMonth() + 1) + d.getDate() + d.getHours() + d.getMinutes() + d.getSeconds();
    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = key + "=" + escape(value) + ";expires=" + exp.toGMTString();
};

第二种不设置过期时间(退出浏览器时，清空数据)

function setCookie(key, value, dateTime) {
      document.cookie = key + "=" + escape(value);//不设置过期时间，退出浏览器的时候清除cookie
}

调用方法

setCookie('data', JSON.stringify(arr), 1);

2.2、获取cookie存储的值

//得到cookie
function getCookieArray(key) {
    var arrStr = document.cookie.split(';');
    for(var i = 0; i < arrStr.length; i++) {
        var temp = arrStr[i].split("=");
        if(key === temp[0]) {
            var current = new Array();
            if(temp[1] == "") {//这一步判断是目的是为了避免key值对应的value为空
                return null;
            }
            current = JSON.parse(unescape(temp[1]));
            return current;
        }
    }
    return null;
};

2.3、清除cookie

//删除cookie
function delCookie(name) {
    setCookie(name, "", -1);
}

以上就是使用cookie和localStroage存储数据的方法！！！