简体   繁体   English

我不明白localStorage方法

[英]i don't understand the localStorage method

i am new to JavaScript and this site and i am trying a mock up site where one webpage will let you create a username and password. 我是JavaScript和这个网站的新手,而且我正在尝试一个模拟网站,其中一个网页可以让您创建用户名和密码。 then it will send it to a webpage that if you log in to it using your username and password then it will take you to Google. 然后它将发送到网页,如果您使用用户名和密码登录到该网页,则会将您带到Google。 i have not gotten to making it so you can create a username and password and have just for now used a built in one. 我还没有做到这一点,所以您可以创建一个用户名和密码,并且现在只使用一个内置的用户名和密码。 i am having trouble getting the variable defined on one web page to go to the other by the localStorage method. 我无法通过localStorage方法将一个网页上定义的变量转到另一个网页。 pleas help me understand in a simple easy way for a newbie. 请新手以简单易用的方式帮助我理解。

here is the page where the variables are defined. 这是定义变量的页面。

 <!DOCTYPE html>
<html>
<head>

<title>
create account
</title>


<script>

localStorage["username1"] = ['jk', 'lol'];
localStorage["password1"] = ['p1', 'p2'];

</script>


</head>

<body>

</body>


</html>

here is the page where i use the defined variables. 这是我使用定义的变量的页面。

<!DOCTYPE html>
<html>
<head>

<title>
create account
</title>


<script>

localStorage["username1"] = ['jk', 'lol'];
localStorage["password1"] = ['p1', 'p2'];

</script>


</head>

<body>

</body>


</html>

MDN has a great reference and examples for local storage: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage MDN对于本地存储有很好的参考和示例: https : //developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Your code will need to look something like - 您的代码需要看起来像-

 // Save data sessionStorage.setItem("username1", "jk"); sessionStorage.setItem("password1", "p1"); // Get data alert( "username = " + sessionStorage.getItem("username1")); alert( "username = " + sessionStorage.getItem("password1")); 

Although you shouldn't be using javascript for usernames and passwords, and you should never be putting the username and password on the client side (With LocalStorage, the user can go in and see the password themselves, or change it even, I believe what you're looking for are localStorage.getItem(key) and localStorage.setItem(key, value) 尽管您不应该使用javascript来输入用户名和密码,也永远不要将用户名和密码放在客户端(通过LocalStorage,用户可以自己查看密码,甚至可以更改密码,我相信您正在寻找的是localStorage.getItem(key)localStorage.setItem(key, value)

Like this 像这样

localStorage.setItem('testing', 'abc');
console.log(localStorage.getItem('testing'));

Note: localStorage is not compatible with older browsers. 注意:localStorage与较旧的浏览器不兼容。 If any users might be using older browsers, it's a good idea to check if it has localStorage. 如果有任何用户使用的是旧版浏览器,则最好检查它是否具有localStorage。 Maybe something like 也许像

if(localStorage != undefinfed)
{
    localStorage.setItem('testing', 'abc');
    console.log(localStorage.getItem('testing'));
}
else
{
    //Browser not supported
}

Also, localStorage only stores data for that page. 另外,localStorage仅存储该页面的数据。 Once you change pages, your localStorage is cleared. 更改页面后,将清除localStorage。 For keeping data between pages, use sessionStorage in the exact same manner 为了保持页面之间的数据,请以完全相同的方式使用sessionStorage

Read about localStorage before trying to use it. 在尝试使用localStorage之前,请先阅读它。 Basically all you have to do is modify the localStorage object in JavaScript. 基本上,您要做的就是在JavaScript中修改localStorage对象。 You can do that directly or use the setItem() and getItem() methods: 您可以直接执行此操作,也可以使用setItem()getItem()方法:

var credentials = {};
credentials.username = "my_username";
credentials.password = "my_password";
//save in localStorage
localStorage.setItem( 'credentials', JSON.stringify(credentials) );
//now to access the items from localStorage, do
var creds = JSON.parse( localStorage.getItem( 'credentials' ) );
console.log( creds );

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM