如何在本地保存html數據

Question

如何在用戶關閉瀏覽器後保存我的HTML元素標記數據。例如

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

，我用jQuery來改變數據屬性

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

而且如果用戶關閉了瀏覽器，回來值數據隨機將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');