javascript中的本地存储_Javascript_Jquery_Html_Radio Button_Local Storage

javascript中的本地存储

javascript jquery html

javascript中的本地存储,javascript,jquery,html,radio-button,local-storage,Javascript,Jquery,Html,Radio Button,Local Storage,我试图获取一个单选按钮值并将其存储在本地存储中，这样我就可以通过变量访问本地存储…如果这对你们来说没有多大意义，我真的很抱歉，因为我是Javascript的初学者 // javascript code (logic.js)// console.log("loading..."); var build= retrievedObject if (build===1){ console.log("Option 1 Remember"); };

我试图获取一个单选按钮值并将其存储在本地存储中，这样我就可以通过变量访问本地存储…如果这对你们来说没有多大意义，我真的很抱歉，因为我是Javascript的初学者

 // javascript code (logic.js)//

    console.log("loading...");
    var build= retrievedObject

    if (build===1){

    console.log("Option 1 Remember");   
    };


    if (build===2){
    console.log("Option 2 Remember");   
    };


    if (build===3){
    console.log("Option 3 Remember");   
    };

    window.getValue = function(){
    var vall= document.querySelector("input[name=optionsRadios]:checked").value;
    }

    localStorage.setItem('vall', JSON.stringify(vall));
    var retrievedObject = localStorage.getItem('vall');

我希望将变量“vall”存储在本地存储中，然后检索以供以后使用

html代码将获取单选按钮值，并通过getValue将其发送到javascript代码（logic.js）

//HTML Code//

</HEAD>
        <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="logic.js"></script>
<BODY>

<form>
<INPUT TYPE="radio" name="optionsRadios" id="Home" VALUE="1" >Home
<INPUT TYPE="radio" name="optionsRadios" id="School" VALUE="2" >School
<INPUT TYPE="radio"  name="optionsRadios" id="Work" VALUE="3" >Work


<center><input type="button" name="send" value="Submit" onclick="getValue();"></center>
</form>


</BODY>
</HTML>

//HTML代码//
家
学校
工作

但是，本地存储似乎不起作用。任何帮助都将非常有用，而且也是一个深入的解释

谢谢

如果您成功地将字符串/对象存储到localStorage中，则此答案基于此事实

要从localStorage检索数据，您需要使用

$.parseJSON（）

将数据解码为变量/字符串，以便在应用程序中使用

var retrievedObject = $.parseJSON(localStorage.getItem('vall'));

更像这样：

未经测试

// javascript code (logic.js)//

    console.log("loading...");
    var vall;
    try {
      vall = localStorage.getItem('vall');
      console.log("read localStorage[vall] = "+vall); 
    } except(e) {
        console.log("got an error reading localstorage "+e);
    }

    window.getValue = function(){
// this function is the only code that has access to the new value of vall
// so it must store it before returning
       var newvall= document.querySelector("input[name=optionsRadios]:checked").value;
       localStorage.setItem('vall',newvall)
    }

您的javascript有一些问题

retrievedObject在第2行被引用时未定义
无需创建window.getValue函数。此外，它所做的只是为局部作用域变量赋值
什么时候
```
localStorage.setItem
```
被调用，
```
vall
```
不存在，它已过期范围
```
localStorage.getItem（'vall'）
```
不工作，因为没有值已使用
```
vall
```
作为其键存储
您引用jQuery，但实际上并不使用它

与其修改代码，不如向您展示如何从头开始。我已经为您编写了一个如何使用本地存储的示例。您可以在JSFIDLE上看到它：

HTML:

这是你的全部密码吗？调用

setItem

时，还没有变量

vall

。并且变量在函数范围内。您不能通过这种方式访问它。您好，请详细说明一下。我应该如何创建vall变量。我以为我已经有了它..var val=document…或者是其他什么。我非常感谢您的帮助，然而，当试图使用保存的值执行逻辑语句时，我似乎遇到了一个问题，因为它说“savedvalue未定义”。例如：如果（savedvalue===1）{do something}，则必须在使用它之前声明一个变量

var savedValue=localStorage.getItem（'vall'）；如果（savedValue==1）{…}

很可能您没有使用

var

声明它。

<form>
    <input type="radio" name="optionsRadios" id="Home" value="1" />Home
    <input type="radio" name="optionsRadios" id="School" value="2" />School
    <input type="radio"  name="optionsRadios" id="Work" value="3" />Work
    <input id="setValue" type="button" name="send" value="Submit" />
</form>

$(document).ready(function() {
    // Add click handler to button
    $('#setValue').click(function() {
        // Get the value of the checked radio button
        var valueToSave = $("input[name=optionsRadios]:checked").val();

        if (!valueToSave) {
            alert('Select an option!');
            return;
        }

        // Save the value in local storage        
        localStorage.setItem('vall', valueToSave);
        alert('Saved value: ' + valueToSave);
    });

    // Get the saved value from local storage
    var savedValue = localStorage.getItem('vall');

    if (savedValue) {
        alert('Saved value is: ' + savedValue);

    // If we have a saved value, check the appropriate radio button
        $('input[name=optionsRadios][value=' + savedValue + ']').attr('checked', 'checked');
    }
});