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

news/2024/7/19 13:33:53 标签: 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

js">	// 写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

js">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(把储存的到期时间设置成过去的某天)

js">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的写读删封装

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

http://www.niftyadmin.cn/n/1162239.html

相关文章

GitHub开源项目学习 电商系统Mall (二) Mac搭建Mall前后台环境

GitHub开源项目学习 电商系统Mall (二) Mac搭建Mall前后台环境

Mac搭建Mall前后台环境 Docker环境安装 此处不赘述&#xff0c;本机安装docker ce version 19.03 https://www.runoob.com/docker/macos-docker-install.html 基础组件安装 1.Mysql安装 原先准备使用本机原有的MySQL&#xff0c;但为了减少原项目配置改动使用教程的docker方…
阅读更多...
P2-25js-jquery对象下的方法， jquery绑定事件的方法

P2-25js-jquery对象下的方法， jquery绑定事件的方法

jquery jQuery对象下的方法 addClass() 追加类名,不会抹掉原有&#xff0c;而是追加在后面removeClass()删除类名,如果有则会删除&#xff0c;如果没有不会进行任何操作toggleClass()追加/删除类名,自动hasClass() 检测是否含有传入类名&#xff0c;返回布尔值 html() 设置/获…
阅读更多...
GitHub开源项目学习 电商系统Mall (三) SpringBoot+MyBatis搭建基本骨架

GitHub开源项目学习 电商系统Mall (三) SpringBoot+MyBatis搭建基本骨架

mysql数据库环境搭建 下载并安装mysql5.7版本设置数据库账号密码创建数据库mall导入Mall数据库脚本 https://github.com/macrozheng/mall-learning/blob/master/document/sql/mall.sql项目使用框架介绍 SpringBoot SpringBoot可以让你快速构建基于Spring的Web应用程序&#…
阅读更多...
P2-26js-jquery版的ajax请求和JSONP请求

P2-26js-jquery版的ajax请求和JSONP请求

jquery版的ajax请求和JSONP请求 jquery版的ajax请求 //原生ajax let http new XMLHttpRequest(); http.open(get,"http://10.35.161.142/dataOrigin.php?name王大伟"); http.send() http.onreadystatechange function(){if(http.readyState 4){console.log(htt…
阅读更多...
GitHub开源项目学习 电商系统Mall (四) mall整合SpringSecurity和JWT实现认证和授权(一)

GitHub开源项目学习 电商系统Mall (四) mall整合SpringSecurity和JWT实现认证和授权(一)

mall整合SpringSecurity和JWT实现认证和授权(一) https://github.com/macrozheng/mall 跳过了官方Learning中较简单的Swagger-UI的实现和整合Redis实现缓存功能的部分&#xff0c;通过整合SpringSecurity和JWT实现后台用户的登录和授权功能&#xff0c;同时改造Swagger-UI的配…
阅读更多...
P2-27node.js-fs，express，mysql，跨域

P2-27node.js-fs，express，mysql，跨域

node.js(分为内置模块和第三方模块) node是什么&#xff1a;是将chrome浏览器中的负责解析js部分的V8引擎剥离出来&#xff0c;做成了一个软件&#xff0c;以做到让我们写的JS代码脱离浏览器可以执行。这个执行环境中只有ECMAscript部分&#xff0c;没有DOM和BOM。node如何使用…
阅读更多...
GitHub开源项目学习 电商系统Mall (五) mall整合SpringSecurity和JWT实现认证和授权(二)

GitHub开源项目学习 电商系统Mall (五) mall整合SpringSecurity和JWT实现认证和授权(二)

mall整合SpringSecurity和JWT实现认证和授权(二) https://github.com/macrozheng/mall 登录注册功能实现 UmsAdminController类 实现了后台用户登录、注册及获取权限的接口 /*** 后台用户管理*/ Controller Api(tags "UmsAdminController", description "后…
阅读更多...
P2-28学生信息管理，前后端联动

P2-28学生信息管理，前后端联动

学生信息管理&#xff0c;前后端联动 使用到 node.js&#xff0c;bootstrap.min…css&#xff0c;jquery.min.js&#xff0c; student0114.html(主页面&#xff0c;数据在数据库中&#xff09; <!DOCTYPE html> <html lang"en"><head><meta …
阅读更多...
最新文章

Copyright @ 2022~2023