javascript - 本地存储不存储 URL

Question

我正在尝试创建一个弹出模式，其中包含根据用户选择进行重定向的位置选项。我尝试将选定的 URL 作为首选项存储在本地存储中，以便用户只需选择一次位置，而不必在每次访问该网站时都处理弹出窗口。

每次我在浏览器中对此进行测试时，都会发生重定向，但是当我输入 console.log 打印出 localStorage 值时，它会返回 null 我在控制台中没有收到任何错误，因此我没有太多可做的。

我的代码如下，我添加了 JS Fiddle here 的链接，非常感谢任何帮助!

    <div class="modal-body">
        <form name="siteSelector">
            <select onchange="save(); go()" id="site" name="site" SIZE="1" class="form-control form-control-lg">
                    <option value="non-value">Choose Site</option>
                    <option value="https://www.google.com">Google</option>
                    <option value="https://www.amazon.com/">Amazon</option>
                    <option value="https://www.guitarcenter.com/">Guitar Center</option>
            </select>
            <script>



                function save(){


                    document.getElementsByName("site").onchange = function(){
                        localStorage.setItem('site', document.getElementsByName("site"));
                    }



                    if (localStorage.getItem('site')) {
                        document.getElementsByName("site").options[localStorage.getItem('site')].selected = true;
                    }
                }

                function go(){
                    location = document.siteSelector.site.options[document.siteSelector.site.selectedIndex].value
                }


            </script>
        </form>
    </div>

Answer 1

您正在尝试将文档元素存储为 localStorage 项。您可以存储所选选项或 URL 的索引。

在您的示例中，document.getElementsByName 返回 NodeList - 而不是单个元素。您的保存函数可能如下所示:

function save () {
   let element = document.getElementById("site");
   if (!element.selectedIndex)
       return; // you can display error if that happens. 
   localStorage.setItem('site', element.selectedIndex);
}