本地存储cookie，localStorage和sessionStorage

cookie，localStorage和sessionStorage之间的区别是什么？

• cookie：操作麻烦，需要大量的字符串处理。兼容性好，数据的生命周期可以灵活地设置。
• localStorage：相对于cookie来说兼容性稍差。数据的生命周期是永久性存储。
• sessionStorage：数据生命周期在会话期（在当前标签页中），其余的所有特性都类似于localStorage的。

localStorage(永久存储)

• 设置 localStorage.setItem(key,value) 写入
• 获取 localStorage.getItem(key)
• 删除 localStorage.removeItem(key)
• 全部清空 localStorage.clear()
• 返回有几条数据 localStorage.length ()

sessionStorage

• 写入 sessionStorage.setItem(key,value)
• 获取 sessionStorage.getItem(key)
• 删除 sessionStorage.removeItem(key)
• 清空 sessionStorage.clear()
• 返回有几条数据 sessionStorage…length

cookie原生封装

let cookie = {
    
    
    // 写入/修改cookie
    set(key, value, expires) {
    
    
        if (typeof expires === "number") {
    
    
            let date = new Date();
            date.setDate(date.getDate() + expires)
            document.cookie = `${
      
      key}=${
      
      value};expires=${
      
      date}`;
        } else {
    
    
            let d = new Date(expires);
            document.cookie = `${
      
      key}=${
      
      value};expires=${
      
      d}`;
            //  }
        }
    },
    // 读取cookie
    get(key) {
    
    
        let arr = document.cookie.split("; ")
        var result = {
    
    }
        arr.forEach(item => {
    
    
            let key = item.split("=")[0];
            let value = item.split("=")[1];
            result[key] = value;
        })
        return key ? result[key] : result;
    },
    // 删除cookie
    remove(key) {
    
    
        if (this.get(key)) {
    
    
            document.cookie = key + "=18;expires=" + new Date('1999-09-09');
            return true;
        } else {
    
    
            return false;
        }
    }
}
//使用时直接调用
// 示例
//cookie.set("username",$("#username").value,30)