如何在动态生成的 jquery 列表中将值保存到 localStorage，同时还为每个元素生成一个 href？

Question

我正在从我的数据库中提取文件名列表，并使用 jquery 动态列出它们。它们作为无序列表添加到 html。我希望每个项目 link 到我的详细信息页面，但我还需要文件 ID 在单击时保存到本地存储。这可能吗？我只需要改进我的语法吗？感谢任何帮助。

jquery函数：

$(function() {
  var $files = $('#files');
  $.ajax({
      type: "GET",
      url: 'some url',
      data: {},
      success: function(files) {
        $.each(files, function(i, file){
          $files.append('<a href="details.html" onclick="localStorage.setItem("file", +file.id+)";>'+file.id+'</a>');
        });
      },
      // Error handling 
      error: function (error) {
      console.log(`Error ${error}`);
      }
  });
})

HTML

<ul id="files"></ul>

Answer 1

双引号内有双引号，还有一些随机的“加号”。

将您的代码更改为此，以改用模板文字： (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)

$files.append(`<a href="details.html" onclick="localStorage.setItem('file', '${file.id}')";>${file.id}</a>`);

使用字符串模板将允许您直接将变量的值打印到带有 ${variableName}

的字符串中

糟糕，我误解了这个问题，留下这个关于如何在 localStorage 中缓存列表以备不时之需的答案：

在从数据库中提取之前，查看它是否存在于本地存储中：


$(function() {
    let storedFiles = window.localStorage.getItem('stored_files');
    
    if(storedFiles !== null) {
        //found in local storage, use this:
        files = JSON.parse(storedFiles); //local storage is stored as a string, you have to convert back to an object
    
        //generate the list of files
        generateListOfFiles(files);
    } else { 
        // not found in local storage, get from database
        
        $.ajax({
          type: "GET",
          url: 'some url',
          data: {},
          success: function(files) {
            //generate the list of files:
            generateListOfFiles(files);
    
           // now store the files back in local storage for next time!
           window.localStorage.setItem("stored_files", JSON.stringify(files)); // local storage should be stored as a string, as mentioned above
          },
          // Error handling 
          error: function (error) {
          console.log(`Error ${error}`);
          }
        });
        
        
    }

    function generateListOfFiles(files) {
        $.each(files, function(i, file){
            let $files = $('#files');
    
            $files.append('<a href="details.html" onclick="localStorage.setItem("file", +file.id+)";>'+file.id+'</a>');
        });
    }
});

如何在动态生成的 jquery 列表中将值保存到 localStorage，同时还为每个元素生成一个 href？

How can I save a value to localStorage in a dynamically generated jquery list, while also generating an href for each element?

javascript

html

jquery

ajax