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

最新推荐文章于 2022-05-23 18:53:38 发布

何小仙

最新推荐文章于 2022-05-23 18:53:38 发布

阅读量132

点赞数

文章标签： js

本文链接：https://blog.csdn.net/hxx548888/article/details/112899819

版权

省市区三级联动

<!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持久化存储

何小仙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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"> </s
复制链接

扫一扫