Question

我正在主页的表格中创建一个包含项目列表（填充了JSON API http://vcld.fsdcmel.librarysolutions.com.au/VCLD_FS_TEST/SmartLibrary/Services/Search/SMLIB_SERVICE_SEARCH.asmx/GetRecommendList）的网页。当用户点击列表中的项目时，我希望他们使用相同的JSON数据查看包含所单击项目的详细列表的新页面

我想将数据存储在新对象中但不确定如何使用该数据显示新页面

我的代码

<div class="container">
    <h1>Recommended List</h1>        
    <div id="output"></div>
</div>

$(document).ready(function(){
    var url ="http://vcld.fsdcmel.librarysolutions.com.au/VCLD_FS_TEST/SmartLibrary/Services/Search/SMLIB_SERVICE_SEARCH.asmx/GetRecommendList";
    $.ajax({
        type:"GET",
        url: url,
        async: false,
        dataType: "json",
        success: function(data){
            // Reset table to blank
            $("#output").html("");
            var bookNum;
            for (var i=0; i<data.items.length; i++) {
                // result table
                $("#output").prepend(
                    "<p>"+data.items[i].title+"<p>"+
                    )
                $(".clickable-row").click(function() {
                    id = $(this).find("p")
                    console.log(id);
                });
            }
        },
        error: function(errorMessage){
            alert("Error");
        }
    });
})

Answer 1

完美使用sessionStorage或localStorage API。这些允许您在页面加载之间保留数据。您可以在此处找到相关文档：

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

这是一个简单的API。

localStorage.setItem('key', 'value'); // sets 'key' = 'value'
localStorage.getItem('key'); // returns 'value'
localStorage.removeItem('key'); //clears key from storage

sessionStorage API相同（将localStorage替换为sessionStorage）;

因此，工作流程为setItem()点击处理程序
导航到下一页
在新页面getItem()上，用于构建详细信息视图

您将保留的对象需要序列化，因为存储无法本机存储对象。所以要存储数据：

JSON.stringify(myDataObject);

然后当你检索它时，需要将它解析回一个对象：

JSON.parse(localStorage.getItem('myStoredData'));

Answer 2

您可以为多个页面运行一个JS文件。只需加入

<script type="text/javascript" src="main.js"></script>

在html页面的底部，就像你通常那样

重用json数据来显示＆＃34;详细信息＆＃34;查看另一个HTML页面

2 个答案: