如何从 localStorage 检索信息以传递到数据库答案

【问题标题】：How to retrieve information from localStorage to pass to database如何从 localStorage 检索信息以传递到数据库
【发布时间】：2017-10-28 15:47:05
【问题描述】：

我正在尝试从 localStorage 获取信息以传递到我的应用程序中的数据库。我在控制台中输入“localStorage”，它会显示正确的值，所以我相信它可以用于检索。但是，由于某种原因，我无法获取数据。现在，变量 rfidText 正在由键盘输入设置。我想通过抓取localStorage中“userID”中的字符串来设置它。下面我在评论中有我尝试过的不起作用的东西。我在 file1 中调用 localStorage.setItem()，在 file2 中调用 localStorage.getItem()：有什么想法吗？我的文件 1 的 javascript 是：

/*jslint browser: true*/
/*global $, jQuery*/

$(document).ready(function () {

    "use strict";
    var scanned = false,
    scannedInput = [];

    $(window).keypress(function (scanEvent) {

        if (scanEvent.which >= 48 && scanEvent.which <= 57) {
            scannedInput.push(String.fromCharCode(scanEvent.which));
        }

        setTimeout(function () {

            if (scannedInput.length === 10) {

                var userID = scannedInput.join("");
                scanned = true;
                window.localStorage.setItem('userID', userID);
                $("#userId").val(userID);

                if (scanned) {
                    window.location.href = "../html/registration.html";
                }
            }

        scannedInput = [];

        }, 500);
    });
});

文件2 javascript是：

console.log(window.localStorage.getItem('userID')); // this prints
var rfidText = window.localStorage.getItem('userID');
console.log(rfidText);  // this doesn't print

var avatarText = "";

var config = {
    apiKey: xxx  //private info
    authDomain: xxx //private info
    databaseURL: xxx //private info
    storageBucket: xxx //private info
};

firebase.initializeApp(config);

var database = firebase.database();

function setAvatar(avatarName) {
    avatarText = avatarName;
    console.log(avatarText);
}

function writeToFirebase(idInput, languageInput, avatarInput, nameInput, 
ageGroupInput) {

    database.ref("RFID/" + idInput).set({
        id: idInput,
        language: languageInput,
        avatar: avatarInput,
        name: nameInput,
    ageGroup: ageGroupInput,
});
}

function update() {

    var rfidText = document.getElementById("rfidInput").value;

    /* instead of the line above, I want to set rfidText with this line
    var rfidText = localStorage.getItem("userID");  << doesn't work */

    var languageText = document.getElementById("languageInput").value;
    var nameText = document.getElementById("nameInput").value;
    var ageGroupText = document.getElementById("ageGroupInput").value;

    writeToFirebase(rfidText, languageText, avatarText, nameText, 
    ageGroupText);
}

【问题讨论】：

你试过在控制台中运行localStorage.getItem("userID")吗？如果 localStorage 具有键“userID”的值，似乎应该可以工作。
你确定localStorage.setItem("userID", "some_id")被调用之前update函数被调用？
@TheThirdOne 我在控制台中输入 localStorage.getItem("userID") 并返回正确的值。
@MaazSyedAdeeb localStorage.setItem("userID", "some_id") 在上一页的javascript文件中设置。
请在输入“localStorage”后使用“控制台输出”更新您的帖子

标签： javascript html local-storage

【解决方案1】：

类似这样的：

localStorage.getItem("key");

完整示例：

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Smith");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>
</html>

这个例子可以在这个链接中测试：https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local

有关本地存储的更多信息，请查看此链接https://www.w3schools.com/html/html5_webstorage.asp

对于本地存储中的多个保存，您可以使用链接中的示例：https://www.w3schools.com/code/tryit.asp?filename=FG2UNYNWBO2D

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Smith");
    localStorage.setItem("firstname", "Luis");
    localStorage.setItem("age", "28 years hold");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("firstname")+" "+localStorage.getItem("lastname")+" "+localStorage.getItem("age");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>
</html>

如果你愿意，你可以保存一个json，例如链接https://www.w3schools.com/code/tryit.asp?filename=FG2VMMBWMZW6

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
var string = {"firstname":"Luis", "lastname": "Smith", "Age": "28 years old"};
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("data", JSON.stringify(string));
    // Retrieve
    console.debug(localStorage.getItem("data"));
    var objdata = JSON.parse(localStorage.getItem("data"));
    console.debug(objdata);
    document.getElementById("result").innerHTML = objdata.firstname + "  "+ objdata.lastname + " " + objdata.Age;
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>
</html>

分步说明：

1)创建一个json{"firstname":"Luis", "lastname": "Smith", "Age": "28 years old"};

2)将json作为字符串保存在本地存储localStorage.setItem("data", JSON.stringify(string));

3) 从存储中获取数据并解析 json var objdata = JSON.parse(localStorage.getItem("data"));

4)使用Json中的数据objdata.Age

对于Json中的多重数据，例如链接https://www.w3schools.com/code/tryit.asp?filename=FG2VX2M9XKMR

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
var string = {"firstname":["Luis","Peter"], "lastname": ["Smith","Maerques"], "Age": ["28 years old", "29 years old"]};
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("data", JSON.stringify(string));
    // Retrieve
    console.debug(localStorage.getItem("data"));
    var objdata = JSON.parse(localStorage.getItem("data"));
    console.debug(objdata);
    document.getElementById("result").innerHTML = objdata.firstname[1] + " " + objdata.lastname[0] + " " + objdata.Age[1];
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>
</html>

与上一个示例的不同之处在于，现在我将数据数组保存在我的 Json 中。

json：

 {"firstname":["Luis","Peter"], "lastname": ["Smith","Maerques"], "Age": ["28 years old", "29 years old"]};

使用Json数据时，必须输入索引数组的编号。

objdata.firstname[1]

如果您想要数组的大小，请使用此代码

objdata.firstname.length

任何问题，只要问，我会尽力回答。

【讨论】：

【解决方案2】：

您可以使用localStorage.setItem("key","value");进行设置

您可以使用localStorage.getItem("key");获取它

您可以使用localStorage.removeItem("key"); 删除它

【讨论】：

我已经在上面的代码中尝试过了。它不起作用。
在浏览器控制台可以运行localStorage.getItem("userID")??告诉我你得到了什么？
它显示了 setItem("userID", userID" 添加的正确值，其中 userID 由字符串设置。
浏览器控制台有错误吗？如果它是在 localStorage 中设置的，那么您尝试访问的代码会出现问题。
我已经编辑了我的帖子以包含我调用 setItem() 的文件中的代码。 @Dinesh，我没有看到任何错误。