如何在动态生成的 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?
我正在从我的数据库中提取文件名列表,并使用 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>
双引号内有双引号,还有一些随机的“加号”。
将您的代码更改为此,以改用模板文字:
(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 动态列出它们。它们作为无序列表添加到 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>
双引号内有双引号,还有一些随机的“加号”。
将您的代码更改为此,以改用模板文字: (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>');
});
}
});