无法将值设置为本地存储

Unable to set values to local Storage

本文关键字：存储 设置      更新时间：2023-09-26

我的代码是这样的

var searchPreferences = new function() {
    this.setValues = localStorage.setItem('searchPreferenceData', JSON.stringify({
        clientName: document.getElementById('clientName').value,
        carrier: document.getElementById('carrierName').value,
        status: document.getElementById('ShipmentStatus').value,
        genericView: document.getElementById('ddl_view').value

    }));
    this.getData = JSON.parse(localStorage.getItem('searchPreferenceData'));
    this.showValues = new function() {
        document.getElementById('clientName').value = GetData.clientName;
    }
}

我像这样调用这个函数

searchPreferences.setValues();

在按钮单击内。但是不会向本地存储添加任何值。谁能指出我做错了什么？

你已经实例化了函数。 你需要像对象的成员而不是函数一样调用它

我想

编辑我的答案来解释更多：
代码看起来像是单例设计模式的实现，但方式错误。
请记住，在以相同的代码语句赋值的同时实例化函数不是一个好主意。实例化函数时，成员类型变为"数据"而不是"函数"：

typeof searchPreferences.getData == "object"

我的意思是像这样的陈述

var fuc = new function () {}

执行函数并将返回的结果分配给func 。你
认为如果我们像你一样在定义searchPreferences后立即打电话给searchPreferences.getData，我们会得到什么？
您希望它返回 null，因为您尚未向 localStorage 设置任何内容，但它返回一个包含输入值的对象。

正确的方法是定义一个功能并在需要时

实例化它，或者以最好的方法，只需定义一个函数并在需要时调用它：

var searchPreferences = function() {}

问题是您在需要使用函数之前使用 new 关键字来实例化函数。 结果变成一个对象，存储在searchPreferences 中。 这不是一个被调用的函数

setValues不是一个函数。它设置为对setItem调用的结果，该结果将未定义。

您的控制台中可能出现如下错误：

未

捕获的类型错误：未定义不是函数

将其包装在一个函数中：

this.setValues = function() {
    localStorage.setItem('searchPreferenceData', JSON.stringify({
        clientName: document.getElementById('clientName').value,
        carrier: document.getElementById('carrierName').value,
        status: document.getElementById('ShipmentStatus').value,
        genericView: document.getElementById('ddl_view').value

    })
};

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var searchPreferences = new function() {
     this.setValues =function(){ 
  try{
alert("i m in");
 localStorage.setItem('searchPreferenceData', JSON.stringify({
        clientName: document.getElementById('clientName').value,
        carrier: document.getElementById('carrierName').value,
        status: document.getElementById('ShipmentStatus').value,
        genericView: document.getElementById('ddl_view').value  
  }));
}catch(err){alert(err.message);}
}
    this.getData =function(){ 
 return JSON.parse(localStorage.getItem('searchPreferenceData'));
}
     this.showValues =   function() {
    try{
        document.getElementById('clientName').value = this.getData().clientName;
   }catch(err){alert(err.message)}   
}


}
</script>
</head>
<body>
<input type="text" id="clientName" />
<input type="text" id="carrierName" />
<input type="text" id="ShipmentStatus" />
<input type="text" id="ddl_view" />
<button  onclick="searchPreferences.setValues()">Store data</button>
<button  onclick="searchPreferences.showValues()">Get data</button>

</body>
</html>
相关文章：