sessionStorage设置与调用，localStorage用法类似，只是需要设置清除ui

最新推荐文章于 2025-06-24 16:07:47 发布

天步

最新推荐文章于 2025-06-24 16:07:47 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/sn_qmzm521/article/details/65630157

JS 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一个地区分站页面的设计与实现过程，重点展示了如何通过JavaScript为页面上的链接添加点击事件，以记录被点击的城市名称并将其存储在sessionStorage中。此外，还介绍了如何在返回上一页时读取存储的城市名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//1.把点击过的文字内容存储到“sessionStorage.lastname”变量内，并返回上一页使用第二步是使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地区分站</title>
<style type="text/css">
a{text-decoration:none;color:black;}
li{list-style:none;}
.clearfix:after{content: ".";display: block;height: 0;clear: both;overflow: hidden;visibility: hidden;}
.clearfix{zoom:1}
.region{margin-top:10px;border:1px solid #e0e1dc;}
.region h3{background:#eee;line-height:30px;padding-left:10px;position:relative;}
.region .item{padding:10px;line-height:28px;display:block;}
.region .item a{padding-left:15px;padding-right:15px;float:left;}
.region .item a:hover{text-decoration:none;background:#3480ce;color:#fff;}
.more_region{position:absolute;right:10px;line-height:28px;top:0;font-weight:normal;}
#container{width:1000px;margin:0 auto;margin-top:10px;border:1px solid #f4f4f4;padding:10px;}
.hot{border-bottom:2px solid #0274bd;padding-bottom:8px;}
.hot li{float:left;margin-right:10px;margin-bottom:10px;}
.hot li a{display:block;line-height:32px;padding-left:16px;padding-right:16px;background:#f4f4f4;}
.hot li a:hover{text-decoration:none;background:#0274bd;color:#fff;}
.city_list{padding-top:10px;}
.item{padding:10px 0;line-height:24px;overflow:hidden;border-bottom:1px dashed #ddd;}
.item dt{float:left;font-family:arial;font-weight:bold;font-size:18px;width:35px;padding-left:25px;color:#444;}
.item dd{margin:0 0 0 55px;padding-left:15px;border-left:1px dashed #b2b2b2;}
.item dd a{padding:1px 12px 1px 12px;white-space:nowrap;float:left;}
.item dd a:hover{text-decoration:none;background:#0274bd;color:#fff;}
#foot{width:1022px;margin:0 auto;text-align:center;margin-top:10px;line-height:24px;color:#666;border-top:2px solid #0274bd;
padding-top:10px;}
#foot a{color:#666;}
.return{position:relative;height:36px;padding:6px;width:1000px;margin:0 auto;text-align:left;font:bold 22px/42px "微软雅黑";color:#737372;}
.return a{position:absolute;right:10px;top:12px;height:36px;width:100px;text-align: center;display:block;background:#0274bd;color:#fff;line-height: 36px;font-size:12px;font-weight: bold;}
.return a:hover{text-decoration:none;background:#f39c11;color:#fff;}
</style>
<script>
function shijian(){//A链接绑定事件
//console.log("1");
var url = document.getElementsByClassName("clearfix");//获取CLASS的DOM元素数组
for(var i=0;i<url.length;i++){//循环数组
//console.log("2");
var sun_li = url[i].getElementsByTagName("li");//获取数组内的li元素数组
for(var j=0;j<sun_li.length;j++){//循环li数组
//console.log("3");
var objs = sun_li[j].childNodes;//得到每个li下的子元素
for(k in objs){//循环子元素
//console.log(objs[k].text);
objs[k].onclick=function(){
var adder = this.text;
sessionStorage.lastname=adder;
history.go(-1);
};
}
}
}
}
</script>
</head>
<body onload="shijian()">

<div class="return">企业分站<a href="index.php">返回首页</a></div>
<div id="container">
<div class="hot">
<ul class="clearfix">
<li><a href="#" target="">北京</a></li>
<li><a href="#" target="">天津</a></li>
<li><a href="#" target="">沈阳</a></li>
<li><a href="#" target="">大连</a></li>
<li><a href="#" target="">哈尔滨</a></li>
<li><a href="#" target="">济南</a></li>
<li><a href="#" target="">青岛</a></li>
<li><a href="#" target="">南京</a></li>
<li><a href="#" target="">上海</a></li>
<li><a href="#" target="">杭州</a></li>
<li><a href="#" target="">武汉</a></li>
<li><a href="#" target="">广州</a></li>
<li><a href="#" target="">深圳</a></li>
<li><a href="#" target="">香港</a></li>
<li><a href="#" target="">澳门</a></li>
<li><a href="#" target="">重庆</a></li>
<li><a href="#" target="">成都</a></li>
<li><a href="#" target="">西安</a></li>
<li><a href="#" target="">石家庄</a></li>
<li><a href="#" target="">长春</a></li>
<li><a href="#" target="">呼和浩特</a></li>
<li><a href="#" target="">太原</a></li>
<li><a href="#" target="">郑州</a></li>
<li><a href="#" target="">合肥</a></li>
<li><a href="#" target="">无锡</a></li>
<li><a href="#" target="">苏州</a></li>
<li><a href="#" target="">宁波</a></li>
<li><a href="#" target="">福州</a></li>
<li><a href="#" target="">厦门</a></li>
<li><a href="#" target="">南昌</a></li>
<li><a href="#" target="">长沙</a></li>
<li><a href="#" target="">汕头</a></li>
<li><a href="#" target="">珠海</a></li>
<li><a href="#" target="">海口</a></li>
<li><a href="#" target="">三亚</a></li>
<li><a href="#" target="">南宁</a></li>
<li><a href="#" target="">贵阳</a></li>
<li><a href="#" target="">昆明</a></li>
<li><a href="#" target="">拉萨</a></li>
<li><a href="#" target="">兰州</a></li>
<li><a href="#" target="">西宁</a></li>
<li><a href="#" target="">银川</a></li>
<li><a href="#" target="">乌鲁木齐</a></li>
<li><a href="#" target="">唐山</a></li>
<li><a href="#" target="">秦皇岛</a></li>
<li><a href="#" target="">淄博</a></li>
<li><a href="#" target="">烟台</a></li>
<li><a href="#" target="">威海</a></li>
<li><a href="#" target="">徐州</a></li>
<li><a href="#" target="">连云港</a></li>
<li><a href="#" target="">南通</a></li>
<li><a href="#" target="">镇江</a></li>
<li><a href="#" target="">常州</a></li>
<li><a href="#" target="">嘉兴</a></li>
<li><a href="#" target="">金华</a></li>
<li><a href="#" target="">绍兴</a></li>
<li><a href="#" target="">台州</a></li>
<li><a href="#" target="">温州</a></li>
<li><a href="#" target="">泉州</a></li>
<li><a href="#" target="">东莞</a></li>
<li><a href="#" target="">惠州</a></li>
<li><a href="#" target="">佛山</a></li>
<li><a href="#" target="">中山</a></li>
<li><a href="#" target="">江门</a></li>
<li><a href="#" target="">湛江</a></li>
<li><a href="#" target="">北海</a></li>
<li><a href="#" target="">桂林</a></li>
<li><a href="#" target="">邯郸</a></li>
<li><a href="#" target="">鞍山</a></li>
<li><a href="#" target="">抚顺</a></li>
<li><a href="#" target="">吉林</a></li>
<li><a href="#" target="">齐齐哈尔</a></li>
<li><a href="#" target="">大庆</a></li>
<li><a href="#" target="">包头</a></li>
<li><a href="#" target="">大同</a></li>
<li><a href="#" target="">洛阳</a></li>
<li><a href="#" target="">潍坊</a></li>
<li><a href="#" target="">芜湖</a></li>
<li><a href="#" target="">扬州</a></li>
<li><a href="#" target="">湖州</a></li>
<li><a href="#" target="">舟山</a></li>
<li><a href="#" target="">漳州</a></li>
<li><a href="#" target="">株洲</a></li>
<li><a href="#" target="">潮州</a></li>
<li><a href="#" target="">柳州</a></li>
<li><a href="#" target="">承德</a></li>
<li><a href="#" target="">保定</a></li>
<li><a href="#" target="">丹东</a></li>
<li><a href="#" target="">开封</a></li>
<li><a href="#" target="">安阳</a></li>
<li><a href="#" target="">泰安</a></li>
<li><a href="#" target="">日照</a></li>
<li><a href="#" target="">蚌埠</a></li>
<li><a href="#" target="">黄山</a></li>
<li><a href="#" target="">泰州</a></li>
<li><a href="#" target="">莆田</a></li>
<li><a href="#" target="">南平</a></li>
<li><a href="#" target="">九江</a></li>
<li><a href="#" target="">宜昌</a></li>
<li><a href="#" target="">襄樊</a></li>
<li><a href="#" target="">岳阳</a></li>
<li><a href="#" target="">肇庆</a></li>
<li><a href="#" target="">乐山</a></li>
<li><a href="#" target="">绵阳</a></li>
<li><a href="#" target="">丽江</a></li>
<li><a href="#" target="">延安</a></li>
<li><a href="#" target="">咸阳</a></li>
<li><a href="#" target="">宝鸡</a></li>
</ul>
</div>
</div>
</body>

</html>

//2.使用，参数存在就输出，不存在就为空

typeof(sessionStorage.lastname) != "undefined"?document.write(sessionStorage.lastname):"";

</script>