cookie & localStorage 基本使用

目录

1.cookie

简介：cookie 是浏览器端的缓存文件，容量大小受浏览器的限制

注意：cookie 里的数据是字符串的形式，想取某个值需要把这些数据分割成 键值对形式

• 工具方法封装（cookie-utils）：

  var operator = "=";
  function getCookieValue(keyStr) {
  		var value = null; //定义容器，将比对过的key 对应的值放入容器
  		var a = window.document.cookie;
  		var arr = a.split("; "); //1.截取（分割）数据
  		for (var i = 0; i < arr.length; i++) {
  
  			var str = arr[i]; //2.将截取的数据遍历到数组
  			var k = str.split(operator)[0]; //3.取截取到数据的 key,再将其以 = 截取
  			var v = str.split(operator)[1]; //4.取截取到数据的 value,再将其以 = 截取
  			if (k == keyStr) { //如果遍历的数组中 key等于 要取的数据 则就将 key 对应的 value 值放入的 value容器中
  				value = v;
  				break;
  			}
  		}
  		return value;
  	}
  
  function setCookieValue(key,value){
  	document.cookie = key+operator+value;
  }
  
  

• 使用：

  • A 页面：存值

    setCookieValue("username",userInfo.username);
    								setCookieValue("userimg",userInfo.userImg);
    

  • B 页面：取值（需引用 封装的工具方法 js 文件）

    var name = getCookieValue("username");
    var img = getCookieValue("userimg");
    

2. localStroage

简介：localStorage：为了存储容量更大的数据

注意：只能存字符串

• A 页面：JSON.stringify(userInfo))：可以将字符串转为 json格式数据存入到缓存中

  localStorage.setItem("users",JSON.stringify(userInfo));//将 userInfo 字符串转为 json格式数据存入到缓存中
  

• B 页面：

  var jsonStr =  localStorage.getItem("users");//取到的是 json 字符串
  localStorage.removeItem("users");//移除  localStroage 键值对