Question

如何在用户关闭浏览器后保存HTML元素标记数据。例如

<div class="classOne" data-random="50">

我用jQuery来改变数据属性

$(".classOne").attr("data-random","40")

如果用户关闭浏览器并返回data-random的值将为40.我怎样才能实现此目的？

Answer 1

您是否尝试过查看 localStorage ？

LocalStorage允许您在浏览器中存储数据。因此，即使用户关闭浏览器并返回后，您仍然将值存储在LocalStorage

中

以下是有关如何使用本地存储的示例代码：

localStorage.setItem("data-random", 40);

Answer 2

您可以使用以下方式进行设置：

localStorage.setItem("data-random","40")

然后加载它：

localStorage.getItem("data-random")

如果要存储JSON对象，则应在保存前使用stringify()，并在加载后使用JSON.parse()。

Answer 3

尝试localStorage。

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

$(document).onload(function(){
    if(localStorage.rendomData){
        var data = localStorage.rendomData - 10
        localStorage.set(randomData,data)
    }
    else{
        localStorage.set(randomData,50)
    }
})

我希望这会有所帮助。

Answer 4

实现它的最简单方法是使用cookie。只需使用此插件：https://github.com/carhartl/jquery-cookie然后在该行上方：

$(".classOne").attr("data-random","40")

添加：

var randValue;
if (typeof $.cookie('my-rand-value') == undefined) {

    // generate random value
    randValue = generateRandomValue //assign random value to variable
    $.cookie('my-rand-value', randValue)

}
else {
    randValue = $.cookie('my-rand-value')
}

最后将静态值更改为变量：

$(".classOne").attr("data-random",randValue)

Answer 5

您可以使用Cookie以及使用本地存储来实现这一目标对于本地存储，第一个商店首先尝试获取值，如果它存储像 -

if(localStorage.getItem("data-random") != null){
   return localStorage.getItem("data-random");
} else {
   return 50;
}

当用户更改值时，您可以通过 -

保存该值

localStorage.setItem("data-random", value);

Answer 6

使用Jquery函数 beforeunload 并将其保存到 localStorage 。

$(window).on('beforeunload', function() {

// Put the object into storage
localStorage.setItem('data', $(".classOne").attr("data-random"));

});

每当页面打开时从存储中检索数据。

var retrievedData = localStorage.getItem('data');

如何在本地保存html数据

6 个答案: