javascript - 输入数组并将其显示为本地存储中的对象

标签 javascript json

我需要输入具有特定产品 ID 的数据并将其保存在本地。单击按钮后,会将它们保存到本地存储。一个产品可以有多个文件名。

在customer中,如果customer给出了id的名称,它应该在文本区域中显示属于该id的所有文件名。

 <!DOCTYPE html>
    <html>
        <title>W3.CSS</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
            <script type="text/javascript">
                var filename = []
            var productid = []

            function managerClick(){
                console.log("manager", productid);  
                console.log("manager", filename);   

                productid.push(document.getElementById("productId").value);
                filename.push(document.getElementById("names").value);

                localStorage.setItem("filename", JSON.stringify(filename)); 
                localStorage.setItem("productid", JSON.stringify(productid));   

                var result={}
                   productid.map(function(k){
                   result[k]=filename;
                   })
                  console.log(result);         

                console.log("productid",productid); 
                console.log("filename",filename);       
            };
                function customerClick(){
                  console.log("Customer");
                 document.getElementById('myTextarea').value = filename;

             };
            </script>
        <body>
            <div class="w3-card-4 w3-margin" style="width:50%;">         
                 <center>Manager</center>

                <div class="w3-container">
                    Product Id: <input type="text" id="productId"><br></br>
                    File Name: <input type="text" id="names"><br></br>
                    <center><button class="w3-btn w3-dark-grey" onclick="managerClick()">Data Entered</button></center><br>
                </div>

                 <center>Customer</center>

                <div class="w3-container">
                    Product Id: <input type="text" id="CustomerpId"><br></br>               
                    <center>
                        <button class="w3-btn w3-dark-grey" onclick="customerClick()">Click To get filename</button>
                    </center><br>
                    <textarea rows="4" cols="30"></textarea>
                </div>
            </div>
        </body>
    </html> 

我需要的是 1 个产品可以有多个文件,但它不应该对其他产品可见。 有人可以帮我做一下吗?

i tryed like this and i get

enter image description here

产品 1 和产品 2 的文件名均显示在两个产品中 产品 1 应具有产品 1 文件 1,2,3 产品 2 应具有产品 2 文件 1,2,3,4

最佳答案

试试这个

<script type="text/javascript">

    var productdetail = []

    function managerClick() {

        productdetail.push({ productid: document.getElementById("productId").value, filename: document.getElementById("names").value });


        localStorage.setItem("ProductDetails", JSON.stringify(productdetail));


    };
    function customerClick() {

        var prod = JSON.parse(localStorage.getItem("ProductDetails"))
        var selectedProductID = document.getElementById("CustomerpId").value

        for (var i = 0; i < prod.length; i++) {
            if (prod[i].productid == selectedProductID) {
                document.getElementById('myTextarea').value = document.getElementById('myTextarea').value +" "+prod[i].filename;

                  Console.log(prod[i].filename);
                }
            }
        };
    </script>

        <textarea rows="4" cols="30" id="myTextarea"></textarea>

关于javascript - 输入数组并将其显示为本地存储中的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36001983/

相关文章:

从 ASP.NET MVC 返回 null 时,jQuery post JSON 失败

javascript - PDFkit js如何将文档保存到文件(Win 8应用程序)

javascript - 小 JS 脚本的背景图像不透明度在 iOS 上不起作用

javascript - 在应用半透明覆盖层后以编程方式计算实现特定颜色所需的基色

java - Jersey/Tomcat - 产生媒体冲突

javascript - 让 JSON 对象在 NodeJS 中工作的问题

javascript - 如果在字符串方法中参数为负数,我们是否仍然从零开始计数?

javascript - 无法从 For 循环外部访问 For 循环内部的数据

node.js - 从 Azure 函数获取 JSON 值

javascript - 位置 1 的 JSON 中的意外标记 o