P2-24js-省市区三级联动，本地存储

省市区三级联动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<select name="" id="province">
	</select>
	<select name="" id="city">
	</select>
	<select name="" id="area">
	</select>

	<script src="machine.js"></script>
	<script src="citys.js"></script>
	<script>
		let province = $("#province");
		let city = $("#city");
		let area = $("#area");
		// 初始化省份数据
		citys.forEach(item=>{
     
     
			let option = document.createElement("option");
			option.innerHTML = item.provinceName;
			province.appendChild(option)
		})
		// 更新城市数据
		function updateCity(index){
     
     
			var index = index || 0;
			city.innerHTML = "";
			citys[index].mallCityList.forEach(item=>{
     
     
				let option = document.createElement("option");
				option.innerHTML = item.cityName;
				city.appendChild(option)
			})
		}
		// 更新区数据
		function updateArea(provinceIndex,cityIndex){
     
     
			area.innerHTML = "";
			citys[provinceIndex].mallCityList[cityIndex].mallAreaList.forEach(item=>{
     
     
				let option = document.createElement("option");
				option.innerHTML = item.areaName;
				area.appendChild(option)
			})
		}
		updateCity(0)
		updateArea(0,0)
		// onchange事件当值发生改变的时候触发的事件
		// 只属于文本框，密码框，文本域与下拉选择菜单
		// selectedIndex属性：下拉选择菜单的Node节点独有的属性
		// 代表当前选择的选择项相对于其他选择项所处的下标
		province.onchange = function(){
     
     
			updateCity(this.selectedIndex)
			updateArea(this.selectedIndex,city.selectedIndex)
		}
		city.onchange = function(){
     
     
			updateArea(province.selectedIndex,this.selectedIndex)
		}
	</script>
</body>
</html>

本地存储

写cookie

	// 写cookie
	function setCookie(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

function getCookie(key){
    
    
		let cookie = document.cookie;
		let arr = cookie.split("; ");
		let result = {
    
    }
		arr.forEach(item=>{
    
    
			let key = item.split("=")[0];
			let value = item.split("=")[1];
			result[key] = value;
		})

		if(key){
    
    
			return result[key];
		}
		return result;
	}

删cookie(把储存的到期时间设置成过去的某天)

function removeCookie(key){
    
    
	let guoqu = new Date("1970-01-01 00:00:00")
	if(key){
    
    
		document.cookie = `${
      
      key}=beybey;expires=${
      
      guoqu}`
	}
	else{
    
    
		let cookie = getCookie();

		for(let i in cookie){
    
    
			document.cookie = `${
      
      i}=beybey;expires=${
      
      guoqu}`
		}
	}
}

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;
        }
    }
}

案例

省市区三级联动
天气预报接入省市区三级联动(接口yiketianqi.com)
30天内免登录页面
todulist持久化存储

P2-24js-省市区三级联动，本地存储

省市区三级联动

本地存储

写cookie

读cookie

删cookie(把储存的到期时间设置成过去的某天)

cookie的写读删封装

案例

猜你喜欢