P2-24js-省市區三級聯動，本地儲存

阿新 • • 發佈：2021-01-21

技術標籤：js

省市區三級聯動

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