javascript - 更新后的 JSON 对象显示在 DOM 和本地存储中，但通过 chrome 开发者控制台访问时不显示？

Question

在下面的js fiddle 中:https://dotnetfiddle.net/aNQEy3 ，我正在初始化一个对象。当您单击“更新”时，我将执行 ajax 调用，并在成功回调中使用新的属性和值更新对象。我可以看到本地存储和 DOM 中更新的对象，但是当我在 chrome 控制台中键入它时，我看不到更新的值。以下是更多详细信息:

初始化对象:

<script type="text/javascript">

    var localClientStorage = window.localStorage;

    var cartObj = {"one":"1","two":"2"};

    localClientStorage.setItem("cartObj",JSON.stringify(cartObj));

    $('#cartObj').text(JSON.stringify(cartObj));

</script>

运行后，我看到以下内容:

本地存储:

DOM:

控制台:

当我单击更新功能时，它会运行以下代码，从存储中获取对象并添加新值，但是当我在控制台中键入“cartObj”时，它仍然显示旧值:

    <script type="text/javascript">



        $(function(){


            $('.submit').click(function(){


                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Update", controller="Home"})',

                            type: 'POST',
                            dataType: 'json',
                            contentType: "application/json; charset=utf-8",
                            success: function() {


                            var localClientStorage = window.localStorage;

                            var cartObj = localClientStorage.getItem("cartObj");

                            cartObj = JSON.parse(cartObj);

                            cartObj.three = "3";

                            localClientStorage.setItem("cartObj", JSON.stringify(cartObj));                     


                           $('#cartObj').text(JSON.stringify(cartObj)); 
                                            }});

            });

        });

    </script>

点击更新后，LocalStorage 和 DOM 显示更新后的值{"one":"1","two":"2","third":"3"}，但是控制台仅显示:

如何在控制台中显示更新后的值？我尝试使用类似的内容更新脚本元素内的内容，看看刷新是否有效，但没有:

$("#cartObj").load(location.href+" #cartObj>*","");

为了查看输出，您必须在控制台中选择 mvc-output-iframe。

Answer 1

您有两个变量cartObj。在第一个代码段中创建的一个全局代码，即您在控制台中看到的代码。

在后回调中，您创建另一个变量 cartObj，它是函数作用域的本地变量并隐藏全局变量。一旦函数执行完毕，它就会被销毁。回调函数未触及全局变量cartObj。