登录、修改用户资料--浏览器存储例 - 万金流

突出程序和页面骨架，尽量不适用CSS，请忽略美观问题。

总体框架：三个页面h1~3，配套三个js,j1~3。

页面1：登录页面。使用zs/123的用户名/密码组合登录，成功则跳转页面2。
页面2：内容页面，随便出现点什么。顶部有用户名和修改链接，点击链接新打开页面3，可以修改昵称。
页面3：用户资料修改页面。修改内容在h2当中立即显示。

配套js概述

所有html背后的直接js文档，第一个函数都是init，用来统筹后续的函数，并对页面内容进行初始化；最后一行都是init();，用来调用它。中间是用到的各种函数。

j1：送页面上的用户名和密码到服务器，并从服务器取回json，包括验证结果和首页内容。因尚未学习相关知识，此处先用本地操作，模拟此过程。
j2：显示网站内容和用户信息，给出修改信息的链接。为了看到即时生效的结果，修改用户信息的页面在新选项卡打开。在localstorage改变时，会刷新页面上的用户名和昵称。
j3：提供昵称修改功能。本应将修改内容发送给服务器，成功后再修改本地内容。此处暂且本地直接更新。

对应代码：

h1.html:

<html>
    <head>
        <title>
            页面1
        </title>
        <script src="js/j1.js" type="module"></script>
    </head>
    <body>
        <div>
            <div>
                <h2>用户登录</h2>
            </div>
                <div>
                    <label for="username">用户名</label>
                    <input type="text" id="username" placeholder="请输入用户名">
                </div>
                <div>
                    <label for="password">密码</label>
                    <input type="password" id="password" placeholder="请输入密码">
                </div>
                <button type="button">登录</button>
        </div>
    </body>
</html>

j1.js:

//页面初始化
function init() {
    let btn = document.querySelector("button");
    btn.addEventListener("click", f1)
}

//登录函数
function f1() {
    let username = document.querySelector("#username").value;
    let password = document.querySelector("#password").value;
    if (username == "" || password == "") {
        alert("请输入用户名或密码");
        return;
    }
    //此处本应发送用户名和密码给服务器，验证用户名和密码是否正确
    //现阶段，本地验证。
    if (username == "zs" && password == "123") {
        alert("登录成功");
        //模拟获取服务器返回的json内容
        let 服务器返回='{"用户":"zs","昵称":"张三","内容":[{"id":1,"title":"标题1"},{"id":2,"title":"标题2"},{"id":3,"title":"标题3"},{"id":4,"title":"标题4"},{"id":5,"title":"标题5"}]}';
        //将网站内容拆分成用户、昵称、内容
        let json=JSON.parse(服务器返回);
        let 用户=json.用户;
        let 昵称=json.昵称;
        let 内容=json.内容;
        //将用户、昵称、内容存储到本地存储
        localStorage.setItem("用户",用户);
        localStorage.setItem("昵称",昵称);
        localStorage.setItem("内容",JSON.stringify(内容));
        //跳转到内容页
        location.href = "h2.html";
    }
    else{
        alert("登录失败");
    }
}
init();

h2.html

<html>
    <head>
        <title>
            页面2
        </title>
        <script src="js/j2.js" type="module"></script>
    </head>

    <body>
        <div style="text-align: right;">
            <span>
                用户：<span id="username"></span>
                昵称：<span id="nickname"></span>
            </span>
            <a target="_blank" href="h3.html">修改用户资料</a>
        </div>
        <p>网站正式内容：</p>
    </body>
</html>

j2.js

function init() {
    if(localStorage.getItem("用户")==null){
        alert("请先登录");
        location.href = "h1.html";
    }
    f1();
    f2();
    addEventListener("storage", f2);
}
//把内容用超链接的形式显示在页面上
function f1() {
    let 内容 = JSON.parse(localStorage.getItem("内容"));

    // 创建一个容器来存放链接列表
    let linkContainer = document.createElement("div");
    // 设置容器样式为居中
    linkContainer.style.textAlign = "center";

    // 遍历内容数组，创建超链接
    // 使用传统for循环替代forEach和箭头函数
    for (let i = 0; i < 内容.length; i++) {
        let item = 内容[i];
        // 创建超链接元素
        let link = document.createElement("a");
        // 使用传统加号拼接字符串
        link.href = "?" + item.id;
        link.textContent = "a" + item.id;
        link.style.margin = "0 10px";

        // 将链接添加到容器中
        linkContainer.appendChild(link);
    }

    // 将容器添加到body中
    document.body.appendChild(linkContainer);
}
//显示用户名和昵称
function f2() {
    let 用户 = localStorage.getItem("用户");
    let 昵称 = localStorage.getItem("昵称");
    document.querySelector("#username").textContent = 用户;
    document.querySelector("#nickname").textContent = 昵称;
}

init();

h3.html

<html>
    <head>
        <title>
            页面3
        </title>
        <script src="js/j3.js" type="module"></script>
    </head>
    <body>
        <div id="userInfoContainer">
            <div>
                <span>用户：</span>
                <span id="username"></span>
            </div>
            <div>
                <span>昵称：</span>
                <input type="text" id="nickname">
            </div>
            <div>
                <button id="saveBtn">保存</button>
                <button id="backBtn">返回</button>
            </div>
        </div>
    </body>
</html>

j3.js

function init() {
    if(localStorage.getItem("用户")==null){
        alert("请先登录");
        location.href = "h1.html";
    }
    f1();
}

//显示用户名和昵称修改界面
function f1() {
    let 用户 = localStorage.getItem("用户");
    let 昵称 = localStorage.getItem("昵称");
    document.querySelector("#username").textContent = 用户;
    document.querySelector("#nickname").value = 昵称;
    let 保存按钮 = document.querySelector("#saveBtn");
    保存按钮.addEventListener("click", f2);
    let 返回按钮 = document.querySelector("#backBtn");
    返回按钮.addEventListener("click", f3);
}

//保存函数
function f2() {
    let 昵称 = document.querySelector("#nickname").value;
    if (昵称 == "") {
        alert("请输入昵称");
        return;
    }
    //此处本应发送昵称给服务器，更新昵称，成功后再本地更新。
    //现阶段，本地更新。
    localStorage.setItem("昵称", 昵称);
    alert("昵称已保存");
}
//返回函数
function f3() {
    location.href = "h2.html";
}

init();

效果可自行查看。

posted on 2025-12-01 18:21 万金流阅读(1) 评论(0) 收藏举报