第九点关于cookie 的写法有缺陷

[CracKerMe]

var setCookie = {
	set: function(name, value) {
		var Days = 30;
		var exp = new Date();
		exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
		document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
	}
}

这种方式 在已存在 cookie键值对的情况下，只是 新增 一组cookie。并没有实现 setCookie 的功能。

建议改进为

/**
 * 设置cookie
 * @param {string} name  键名
 * @param {string} value 键值
 * @param {integer} days cookie周期
 */
function setCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }else{
        var expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";
}
// 获取cookie
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
// 删除cookie
function deleteCookie(name) {
    setCookie(name,"",-1);
}

[CracKerMe]

删除功能还是不够完美,又继续改进,增加对于 火狐 ie 的兼容

// COOKIE 的 通用方法
/*
* name：  cookieName
* value:  cookieValue
* days:   几天 大于0,建议为整数
* isZero: 是否是零点
*/
var SpCusCookie = {
	setCookie: function (name, value, days, isZero) {
		var date = new Date(),
			expires = "",
			days = Number(days);
		if (days) {
			if(isZero) {
				var curTemp = date.getTime();
				var curWeekHours = new Date(date.toLocaleDateString()).getTime() - 1;
				var passedTimeStamp = curTemp - curWeekHours;
				var leftTimeStamp = 24 * 60 * 60 * 1000 - passedTimeStamp;
				var leftTime = new Date();
				leftTime.setTime(leftTimeStamp + curTemp + (days-1) * 24 * 60 * 60 * 1000);
				expires = "; expires="+leftTime.toGMTString();
			} else {
				date.setTime(date.getTime()+(days*24*60*60*1000));
				expires = "; expires="+date.toGMTString();
			}
		}
		document.cookie = name+"="+value+expires+"; path=/";
	},
	getCookie: function (name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	},
	deleteCookie: function (name) {
		var date = new Date();
		date.setTime(date.getTime()-10000); //删除一个cookie，就是将其过期时间设定为一个过去的时间
		document.cookie = name + "= ' ' " + "; expires=" + date.toUTCString()+";path="+"/";		
		document.cookie = name + "= ' ' " + "; expires=" + date.toUTCString()+";path="+"/";
	}
}

[CracKerMe]

localStorage 封装：过期时间与加密编码

const STORAGE_KEY = 'myAppName'; // 可选：定义一个命名空间，避免键名冲突

const storage = {
  // 加密函数
  encrypt(data, key) {
    // 使用 AES 加密
    const encrypted = CryptoJS.AES.encrypt(JSON.stringify(data), key).toString();
    return encrypted;
  },

  // 解密函数
  decrypt(data, key) {
    try {
      const decrypted = CryptoJS.AES.decrypt(data, key).toString(CryptoJS.enc.Utf8);
      return JSON.parse(decrypted);
    } catch (error) {
      console.error(`解密数据出错：${error}`);
      return null;
    }
  },

  // 设置 localStorage 数据，并指定过期时间
  setItem(key, value, expire = 1000 * 60 * 60) { // 默认有效期 1 小时
    try {
      const data = {
        value: this.encrypt(value, 'your_secret_key'), // 使用你的密钥加密
        expire: Date.now() + expire,
      };
      localStorage.setItem(`${STORAGE_KEY}-${key}`, JSON.stringify(data));
    } catch (error) {
      console.error(`设置 localStorage 数据出错：${error}`);
    }
  },

  // 读取 localStorage 数据，并判断是否过期
  getItem(key) {
    try {
      const data = JSON.parse(localStorage.getItem(`${STORAGE_KEY}-${key}`));
      if (data && data.expire > Date.now()) {
        return this.decrypt(data.value, 'your_secret_key'); // 使用你的密钥解密
      } else {
        this.removeItem(key); // 移除过期数据
        return null;
      }
    } catch (error) {
      console.error(`读取 localStorage 数据出错：${error}`);
      return null;
    }
  },

  // 移除 localStorage 数据
  removeItem(key) {
    try {
      localStorage.removeItem(`${STORAGE_KEY}-${key}`);
    } catch (error) {
      console.error(`移除 localStorage 数据出错：${error}`);
    }
  },

  // 清空所有 localStorage 数据
  clear() {
    try {
      localStorage.clear();
    } catch (error) {
      console.error(`清空 localStorage 数据出错：${error}`);
    }
  },
};

// 使用示例
storage.setItem('user', { name: 'Alice', age: 20 }, 1000 * 60 * 60 * 24); // 有效期 24 小时
const user = storage.getItem('user');
console.log(user); // 输出：{ name: 'Alice', age: 20 }

代码解释:

• 引入 CryptoJS: 使用 CryptoJS 库进行加密解密操作，需要先在项目中引入该库。
• 定义命名空间: STORAGE_KEY 用于定义命名空间，避免与其他应用或库的 localStorage 键名冲突。
• 加密函数 encrypt: 使用 AES 加密函数将数据进行加密，并返回加密后的字符串。
• 解密函数 decrypt: 使用 AES 解密函数将加密后的字符串进行解密，并返回解密后的数据。
• 设置数据函数 setItem: 将数据加密并与过期时间一起存储到 localStorage 中。
• 读取数据函数 getItem: 从 localStorage 中读取数据，并判断是否过期。如果过期，则移除数据并返回 null，否则进行解密后返回数据。
• 移除数据函数 removeItem: 从 localStorage 中移除指定键的值。
• 清空数据函数 clear: 清空所有 localStorage 数据。

使用注意事项:

• 密钥安全: your_secret_key 是用于加密解密的密钥，请妥善保管，不要泄露。
• 库引入: 确保 CryptoJS 库已成功引入项目。
• 数据类型: localStorage 只支持字符串类型数据，需要对复杂数据进行序列化和反序列化。
• 使用此封装可以实现更安全、更灵活的 localStorage 管理功能。