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

Posted 2023-03-05

技术标签:

【中文标题】如何从 localStorage 检索信息以传递到数据库【英文标题】：How to retrieve information from localStorage to pass to database 【发布时间】：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”后使用“控制台输出”更新您的帖子 【参考方案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，我没有看到任何错误。

以上是关于如何从 localStorage 检索信息以传递到数据库的主要内容，如果未能解决你的问题，请参考以下文章

如何从从 Firebase 检索信息的闭包中传递数据？

使用 Localstorage 将 javascript 变量从一个 html 页面存储和检索到另一个 (DOM)

有没有办法将 localstorage:getItem() 的结果从 webview 传递给活动

codeigniter 将数据从视图传递到模型并检索信息

Svelte/Sapper.js - 如何使用 localStorage 数据初始化存储？

如何在codebehind的pageload事件被触发之前，在页面加载时将一个会话存储值传递到文本框中？