时间戳

首页 > 解决方案 > 如何防止用户轻易访问localStorage

javascript - 如何防止用户轻易访问localStorage

问题描述

我正在为我的 html 博客网站创建登录/注册表单。我已经设法使用localStorageor创建了用户信息sessionStorage。每当有人创建帐户时，我都会存储它，并在有人想登录时获取它。

我还没有登出或实际的用户页面，但这不是我的问题。问题是有人很容易窃取密码或清除所有帐户数据localStorage.clear()

这是一个 HTML 示例：

<html>

<head>
    <script src="index.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Accounts</title>
</head>

<body>
    <article>
        <h1>Log In</h1>
        <input type="text" id="signin-username" placeholder="Username" value="">
        <input type="password" id="signin-password" placeholder="Password" value="">
        <button type="submit" onclick="signin()">Sign In</button>
        <!------------------------------------>
        <h1>Create Account</h1>
        <input type="text" id="create-username" placeholder="Username" value="">
        <input type="password" id="create-password" placeholder="Password" value="">
        <button type="submit" onclick="create()">Create Account</button>
    </article>
</body>

</html>

这是它的javascript：

var a = localStorage.length;

function signin() {
    var name = document.getElementById('signin-username').value;
    var pass = document.getElementById('signin-password').value;

    if (name === '' && pass === '') {
        console.log('Please provide your account details')
    }

    else if (name === '') {
        console.log('Please provide your username!');
    }

    else if (pass === '') {
        console.log('Please provide your password!');
    }

    else {
        var ii;
        for (ii = 0; ii < a; ii++) {
            if (name === localStorage.key(ii)) {
                console.log('Logged in as ' + name);
                ii > a
            }
            else {
                console.log('Account Does Not Exist!')
            }
        }
    }
};

function create() {

    var username = document.getElementById('create-username').value;
    var password = document.getElementById('create-password').value;

    if (username === '' && password === '') {
        console.log('Invalid Username and Password')
    }

    else if (username === '') {
        console.log('Invalid Username');
    }

    else if (password === '') {
        console.log('Invalid Password');
    }

    else {
        var i;
        for (i = 0; i < a; i++) {
            if (username === localStorage.key(i)) {
                console.log('Username Exists!');
            }
            else {
                localStorage.setItem(username, password)
            }
        };
    }
}

我必须发布完整的东西才能让它有意义。任何人都对存储数据有建议，例如用户 cookie？您甚至可以将我重定向到登录示例！

标签： javascripthtmllocal-storage

解决方案

我已经设法使用localStorageor创建了用户信息sessionStorage。

LocalStorage 是 Web 浏览器的“本地”。存储在 LocalStorage 中的数据不会与 Web 服务器或查看该站点的其他 Web 浏览器共享。将帐户数据存储在这些位置是没有意义的，因为这样做会导致“帐户”仅存在于一台计算机上。

（SessionStorage 的工作方式类似，只是在关闭浏览器时它会消失——因此它对您的用途更没用。）

如果您想允许用户在您的网站上创建帐户，您将需要在 Web 服务器上运行某种代码来实现这些帐户。无法完全在客户端 Javascript 中实现此功能。

推荐阅读