local-storage 相关问题

我在标题中有以下部分（在index.html文件中）：我在标题中有以下部分（在index.html文件中）： <div class="rightsidetext"> <div class="usernameDisplay" style="display: none;"></div> <div class="loginbutton" id="signOutButton" style="display: none;"> <a href="#">Sign Out</a> </div> <div class="loginbutton"><a href="signin.html">Sign in</a></div> <div class="loginbutton"><a href="Login.html">Log in</a></div> </div> 首次加载网站时，会显示登录和登录按钮。用户登录后，我希望将这两个按钮替换为各自的用户名和注销按钮。在链接到index.html（replaceWithUsername.js）的js文件中，我有： document.addEventListener('DOMContentLoaded', () => { const usernameDisplay = document.querySelector('.usernameDisplay'); const signOutButton = document.getElementById('signOutButton'); const signInButton = document.querySelector('.loginbutton a[href="signin.html"]'); const loginButton = document.querySelector('.loginbutton a[href="Login.html"]'); // Retrieve username from localStorage const username = localStorage.getItem('username'); if (username) { // Show username and sign out button usernameDisplay.textContent = username; usernameDisplay.style.display = 'block'; signOutButton.style.display = 'block'; // Hide sign-in and log-in buttons signInButton.style.display = 'none'; loginButton.style.display = 'none'; } else { console.log('No username found'); } }); 在signin.html的末尾我有： <script> document.addEventListener('DOMContentLoaded', function() { const inputField = document.getElementById('wantedSpace'); // Listen for changes in the input field inputField.addEventListener('input', function(event) { const username = event.target.value; // Get the value entered by the user if (response.status == 200) { console.log('Username found:', username); // Set username in localStorage localStorage.setItem('isLoggedIn', true); localStorage.setItem('username', username); // Redirect to index.html window.location.href = '/allPages/index.html'; } else { console.error('Login failed. Please try again.'); } }); }); </script> 此外，我还有登录路由（在node.js中，它连接到mongoDB batabase）： app.post('/login', async (req, res) => { const { usernameOrEmail, password } = req.body; try { // Find user by username or email const user = await User.findOne({ $or: [{ username: usernameOrEmail }, { email: usernameOrEmail }] }); if (!user) { return res.status(404).redirect('/allPages/registration_feedback/sign_in_feedback/userNotFound.html'); } // Compare entered password with hashed password const passwordMatch = await bcrypt.compare(password, user.password); if (!passwordMatch) { return res.status(401).redirect('/allPages/registration_feedback/sign_in_feedback/incorrectPassword.html'); } console.log('Loged in user:', user); const token = generateToken(user); return res.status(200).redirect('/allPages/index.html'); } catch (err) { console.error('Login error:', err); return res.status(500).json({ error: 'Login failed. Please try again.' }); } }); 登录用户后，在 VSC 终端中，我确实获得了该用户的坐标，但在浏览器中，导航栏保持不变（带有登录和登录按钮，没有用户名），并且在控制台中显示以下消息: no username found replaceWithUsername.js:24 如何让用户名出现在页面上？问题在于在本地存储中正确设置和检索用户名：用户名必须在成功登录后存储，然后检索以更新index.html中的UI。 JavaScript 代码需要正确隐藏“登录”和“登录”按钮，同时根据此登录状态显示用户名和“退出”按钮。 if (username) { // Show username and sign out button usernameDisplay.textContent = username; usernameDisplay.style.display = 'block'; signOutButton.style.display = 'block'; // Hide sign-in and log-in buttons by selecting their parent divs signInButton.parentElement.style.display = 'none'; loginButton.parentElement.style.display = 'none'; } else { console.log('No username found'); } // other code.

javascript html node.js local-storage

回答 1 投票 0

Chrome 扩展：本地存储，如何导出

我有一个 chrome 扩展，可以将一堆数据保存到 chrome.storage.local。我正在尝试找到简单的方法来导出这些数据并将其打包到文件中。我不受文件类型的限制...

google-chrome-extension local-storage

回答 3 投票 0

local-storage 相关问题

最新问题