【JavaScript】小兔鲜登录页面（3）小兔鲜首页页面
小兔鲜首页页面
需求：
- 从登录页面跳转过来之后，自动显示用户名
- 如果点击退出，则不显示用户名
步骤：
最好写个渲染函数，因为一会的退出，还需要用到
①：如果本地存储有记录的用户名，读取本地存储数据
需要把用户名写到第一个li里面
格式：pink老师
因为登录了，所以第二个里面的文字变为，退出登录
格式：退出登录
②：如果本地存储没有数据，则复原为默认的结构
<ul class="xtx_navs">
<li>
<a href="javascript:;">
<i class="iconfont icon-user">pink老师i>
a>
li>
ul>
实际操作
// 1. 获取第一个小li
const li1 = document.querySelector('.xtx_navs li:first-child')
const li2 = li1.nextElementSibling
// 2. 最好做个渲染函数 因为退出登录需要重新渲染
function render() {
// 2.1 读取本地存储的用户名
const uname = localStorage.getItem('xtx-uname')
// console.log(uname)
if (uname) {
li1.innerHTML = `${uname}`
li2.innerHTML = `退出登录`
} else {
li1.innerHTML = `请先登录`
li2.innerHTML = `免费注册`
}
}
render() // 调用函数
步骤：
④：点击 退出登录
删除本地存储对应的用户名数据
重新调用渲染函数即可
// 2. 点击退出登录模块
li2.addEventListener('click', function () {
// 删除本地存储的数据
localStorage.removeItem('xtx-uname')
// 重新渲染
render()
})
最后：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
<script>
// 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()
script>
head>
<body>
<div class="xtx_topnav">
<div class="wrapper">
<ul class="xtx_navs">
<li>
<a href="./login.html">请先登录a>
li>
<li>
<a href="./register.html">免费注册a>
li>
<li>
<a href="./center-order.html">我的订单a>
li>
<li>
<a href="./center.html">会员中心a>
li>
<li>
<a href="javascript:;">帮助中心a>
li>
<li>
<a href="javascript:;">在线客服a>
li>
<li>
<a href="javascript:;">
<i class="mobile sprites">i>
手机版
a>
li>
ul>
div>
div>
<div class="xtx_header">
<div class="wrapper">
<h1 class="xtx_logo"><a href="/">小兔鲜儿a>h1>
<div class="xtx_navs">
<ul class="clearfix">
<li>
<a href="./index.html">首页a>
li>
<li>
<a href="./category01.html">生鲜a>
li>
<li>
<a href="./category01.html">美食a>
li>
<li>
<a href="./category01.html">餐厨a>
li>
<li>
<a href="./category01.html">电器a>
li>
<li>
<a href="./category01.html">居家a>
li>
<li>
<a href="./category01.html">洗护a>
li>
<li>
<a href="./category01.html">孕婴a>
li>
<li>
<a href="./category01.html">服装a>
li>
ul>
div>
<div class="xtx_search clearfix">
<a href="./cart-none.html" class="xtx_search_cart sprites">
<i>2i>
a>
<div class="xtx_search_wrapper">
<input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
div>
div>
div>
div>
<div class="xtx_entry">
<div class="wrapper">
<div class="xtx_category">
<ul class="xtx_category_super">
<li>
<a href="javascript:;">
生鲜
<small>水果small>
<small>蔬菜small>
a>
<i class="sprites">i>
li>
<li class="active">
<a href="javascript:;">
美食
<small>面点small>
<small>干果small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
电器
<small>数码产品small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
居家
<small>床品small>
<small>四件套small>
<small>被枕small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
洗护
<small>洗发洗护small>
<small>美妆small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
孕婴
<small>奶粉small>
<small>玩具small>
<small>辅食small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
餐橱
<small>数码产品small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
服饰
<small>女装small>
<small>男装small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
杂货
<small>户外small>
<small>图书small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
品牌
<small>品牌制造small>
a>
<i class="sprites">i>
li>
ul>
<div class="xtx_category_subset">
div>
div>
<div class="xtx_banner">
<ul>
<li>
<a href="javascript:;">
<img src="./uploads/banner_1.png" alt="">
a>
li>
ul>
<a href="javascript:;" class="prev sprites">a>
<a href="javascript:;" class="next sprites">a>
<div class="indicator">
<span>span>
<span>span>
<span class="active">span>
<span>span>
<span>span>
div>
div>
div>
div>
<div class="xtx_goods_new xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>新鲜好物<small>新鲜出炉 品质靠谱small>h3>
<a href="./index-new.html" class="more">
查看全部<i class="sprites">i>
a>
div>
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/new_goods_1.jpg" alt="">
<span class="name">睿米无线吸尘器F8span>
<span class="price"><small>￥small>899span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_2.jpg" alt="">
<span class="name">智能环绕3D空调span>
<span class="price"><small>￥small>1299span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_3.jpg" alt="">
<span class="name">广东软软糯米煲仔饭span>
<span class="price"><small>￥small>129span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_4.jpg" alt="">
<span class="name">罗西机械智能手表span>
<span class="price"><small>￥small>3399span>
a>
div>
div>
div>
<div class="xtx_goods_popular xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>人气推荐<small>人气爆款 不容错过small>h3>
div>
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/popular_1.jpg">
<span class="title">特惠推荐span>
<span class="alt">我猜得到 你的需要span>
a>
<a href="./index-hot.html">
<img src="./uploads/popular_2.jpg">
<span class="title">爆款推荐span>
<span class="alt">人气好物推荐span>
a>
<a href="./index-one.html">
<img src="./uploads/popular_3.jpg">
<span class="title">场景使用一站买全span>
<span class="alt">编辑精心整理推荐span>
a>
<a href="javascript:;">
<img src="./uploads/popular_4.jpg">
<span class="title">领券中心span>
<span class="alt">发现更多超值优惠券span>
a>
div>
div>
div>
<div class="xtx_goods_brand xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>热门品牌<small>国际经典 品质保证small>h3>
<div class="page-bar">
<a href="javascript:;" class="prev sprites">a>
<a href="javascript:;" class="next sprites active">a>
div>
div>
<div class="xtx_goods">
<ul>
<li>
<a href="./index-brand.html">
<img src="./uploads/brand_goods_1.jpg" alt="">
a>
<a href="./brand-list.html">
<img src="./uploads/brand_goods_2.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_3.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_4.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_5.jpg" alt="">
a>
li>
ul>
div>
div>
div>
<div class="xtx_goods_category xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>生鲜h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果a>
<a href="javascript:;">蔬菜a>
<a href="javascript:;">肉禽蛋a>
<a href="javascript:;">裤装a>
<a href="javascript:;">衬衫a>
<a href="javascript:;">内衣a>
div>
div>
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/fresh_goods_cover.jpg" alt="">
a>
<div class="label">
<span>生鲜馆span>
<span>全场3件8折span>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_1.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">美威 智利原味三文鱼排 240g/袋 4片装p>
<p class="flag">海鲜年货p>
<p class="price"><small>￥small>59p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_2.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只p>
<p class="flag">火锅食材p>
<p class="price"><small>￥small>71.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_3.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装p>
<p class="flag">海鲜水产p>
<p class="price"><small>￥small>49.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_4.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海p>
<p class="flag">海鲜年货p>
<p class="price"><small>￥small>899p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_5.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g p>