Question

我正在尝试用数组创建一个对象，每个对象都应该有文件名数组。我将对象命名为productid，它可以有多个文件名。当客户提供productid时，文件名必须显示在文本区域中。我有以下代码：

<!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 productid = []
        var filename = []           

        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);  
            document.getElementById('myTextarea').value = ""; 
            document.getElementById('CustomerpId').value = "";   
        };

    function customerClick(){
    document.getElementById('myTextarea').value = "";
    var CustomerpId = document.getElementById('CustomerpId').value;
    var filenames = JSON.parse(localStorage.getItem("filename"));
    var productIds= JSON.parse(localStorage.getItem("productid"));
    var tempArr = [];
    for(i=0; i< productIds.length; i++) {
        if(productIds[i] == CustomerpId) {
            tempArr.push(i);
        }
    }
    for(i=0; i< tempArr.length; i++) {
        document.getElementById('myTextarea').value += filenames[tempArr[i]] + ",";
    }          
};
        </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" id="myTextarea"></textarea>
            </div>
        </div>
    </body>
</html>

此代码的问题在于，每当我在客户部分输入productid时，都会显示所有文件名的数组。我想只显示特定productid的数组：

example:  product1[ file1,file2,file3]
          product2[ file1,file2,file3,file4]
          product3[ file1]

应该显示该产品中的数组，如果给出了特定产品，则必须显示该产品中的数据，上面的代码显示如下：

输入我给了1作为productid＆＃34; a，aa，aaa＆＃34;，2作为第二产品和＆＃34; b，bb，bbb＆＃34;作为文件名。在我的控制台a，aa，aaa和b，bb，bbb已显示在我不希望发生这两种产品中。所有a，aa，aaa应该在第一个产品中，所有b，bb，bbb应保存在第二个产品中。每个产品都应该显示自己的价值。

Answer 1

尝试此功能：

     function customerClick(){
        document.getElementById('myTextarea').value = "";
        var CustomerpId = document.getElementById('CustomerpId').value;
        var filenames = JSON.parse(localStorage.getItem("filename"));
        var productIds= JSON.parse(localStorage.getItem("productid"));
        var tempArr = [];
        for(i=0; i< productIds.length; i++) {
            if(productIds[i] == CustomerpId) {
                tempArr.push(i);
            }
        }
        for(i=0; i< tempArr.length; i++) {
            document.getElementById('myTextarea').value += filenames[tempArr[i]] + ",";
        }          
    };

单击获取字段名称，您必须获取要显示的ID，然后对productid数组和文件名数组执行操作。

编辑：根据您在评论中提到的更新代码：

    function managerClick() {
        var productid = document.getElementById("productId").value;
        var filename = document.getElementById("names").value;

        var oldItems = JSON.parse(localStorage.getItem(productid)) || [];
        var newItem = filename;
         oldItems.push(newItem);
         localStorage.setItem(productid, JSON.stringify(oldItems));
    }

    function customerClick() {
        document.getElementById('myTextarea').value = "";
        var CustomerpId = document.getElementById('CustomerpId').value;
        var productIds = JSON.parse(localStorage.getItem(CustomerpId));
        for(i=0;i<productIds.length;i++) {
            document.getElementById('myTextarea').value += productIds[i] + ",";
        }

    }

希望这有帮助。

localstorage

1 个答案: