如何在浏览器本地存储中存储数据

时间:2014-10-30 06:03:01

标签: javascript html5 local-storage

我试图不使用数据库,而是使用浏览器本地存储作为登录示例。我的意思是当用户提供用户名'和密码'它将从浏览器本地存储中检查,然后才能登录。 我正在使用HTML5的localStorage.setItem和localStorage.getItem来获取数据并显示它。 这是我的代码 -

var user_name=document.getElementById('userName').value;
var user_pswd=document.getElementById('password').value;                  
localStorage.setItem("user", user_name);
localStorage.setItem("pass", user_pswd);                    
// Retrieve                    
document.getElementById("output").innerHTML = localStorage.getItem("user");

它设置数据并显示用户名,但重启浏览器后是否可以获取数据?当我第一次尝试登录时,如何查看浏览器数据?如有任何帮助,我们非常感谢..

1 个答案:

答案 0 :(得分:3)

重新启动浏览器不会删除本地存储数据。

您可以检查是否包含以下条件的两个密钥(userName,密码)的数据

if ((localStorage.getItem("userName") !== null) && (localStorage.getItem("password") !== null))
{
    // you have values for both userName and password
}

对于您的情况,您可以测试文本框值是否与本地存储中的值匹配

if ((localStorage.getItem("userName") === null) && (localStorage.getItem("password") === null))
{
    localStorage.setItem("user", "Subho"); // writes name and password to local storage if not exists
    localStorage.setItem("pass", "Subho"); 
}

if ( (localStorage.getItem("user") == document.getElementById('userName').value)
{
    if ( (localStorage.getItem("pass") == document.getElementById('password').value)
    {
        // login is successful
    }           
}

但是这不是一种安全的登录方法,用户可以访问本地存储数据