使用JavaScript或Jquery在浏览器中存储本地值的最佳方法是什么？
[英]what is the best way to store local values in browser using Javascript or Jquery?
问题描述
I am storing local variables in Array. 
我在数组中存储局部变量。 But when i try to refresh the page the array gets empty. 但是，当我尝试刷新页面时，数组变空。 I want previous values after page refres also. 我也想在页面引用后使用以前的值。
I am trying "Previous/Next" functionality in Javascript. 我正在尝试使用Javascript中的“上一个/下一个”功能。 It is working fine .But when i try to reload the page the values in array get deleted. 它工作正常。但是当我尝试重新加载页面时，数组中的值将被删除。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var urllist = [];
var ind = 0;
var myVar;
myVar = setInterval(Geturlfun, 3000);
function Geturlfun() {
var pageURL = window.location.href;
if (urllist[ind - 1] == pageURL) {
} else {
urllist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
}
}
function goBkHist(a) {
var l_ref = ind - 2;
if (l_ref != 0) {
var pageURL2 = urllist[l_ref];
ind = l_ref + 1;
alert(pageURL2);
loadUrl(pageURL2);
}
}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = urllist[l_ref_2];
ind = l_ref_2 + 1;
alert(pageURL2);
loadUrl(pageURL2);
}
function loadUrl(newLocation) {
window.location = newLocation;
location.reload();
return true;
}
</script>
</head>
<body>
<input type="button" value="BACK " onclick="goBkHist(-1)" />
<input type="button" value="FORWARD" onclick="goFdHist(1)" />
</body>
</html>
In this code if i click on Back or Forward the URL displayed but when i try to load that URL it page getting reloaded and values in array deleted. 在此代码中，如果我单击“上一步”或“前进”，则显示的URL，但是当我尝试加载该URL时，它将重新加载页面，并删除数组中的值。
How can i handle those issues. 我该如何处理这些问题。
Is there any way to handle this type of storing with other methods like Sessions and cookies. 有没有其他方法可以使用会话和cookie之类的其他方法来处理这种类型的存储。
3 个解决方案
解决方案1
0 2016-11-03 11:43:04
You can use the LocalStorage API for persisting data at the client-side. 您可以使用LocalStorage API在客户端保留数据。 If you have to support ancient browsers, you can write a simple fallback to cookies. 如果必须支持古老的浏览器，则可以编写一个简单的备用cookie。 Note that LocalStorage has some size limit, something about 10MB per domain if I remember correctly. 请注意，LocalStorage有一些大小限制，如果我没有记错的话，每个域大约有10MB。
Check the documentation here . 在此处检查文档。
You can simply use the localStorage.getItem and localStorage.setItem functions. 您可以简单地使用localStorage.getItem和localStorage.setItem函数。
解决方案2
0 2016-11-03 11:47:24
You can either use localStorage or sessionStorage By localStorage you can do this like 您可以使用localStorage或sessionStorage 。
localStorage.setItem("DataValue", "Your Value");
and retrieve this by 并通过检索
localStorage.getItem("DataValue")
by sessionStorage its like 通过sessionStorage其喜欢
sessionStorage.DataValue = "Your Value"
and retrieve by 并通过检索
var Data = sessionStorage.DataValue
all of these are client side features. 所有这些都是客户端功能。 sessionStorage is bind with an individual tab of the browser where as the localStorage will be available throughout the browser. sessionStorage与浏览器的单个选项卡绑定，因为localStorage在整个浏览器中都可用。
解决方案3
0 2016-11-03 11:48:02
Value stored in sessionStorage will be auto removed when you will close that tab. 当您关闭该标签时，存储在sessionStorage中的值将被自动删除。
If you store value in localStorage will not be auto removed unless you delete it programmatically or delete browser data. 如果您将值存储在localStorage中，则除非您以编程方式将其删除或删除浏览器数据，否则不会自动删除该值。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
// Getting value from browser side.
if (window.sessionStorage.getItem('url_list'))
{
var urllist = $.parseJSON(window.sessionStorage.getItem('url_list'));
}
else
{
var urllist = [];
}
var ind = 0;
var myVar;
myVar = setInterval(Geturlfun, 3000);
function Geturlfun() {
var pageURL = window.location.href;
if (urllist[ind - 1] == pageURL)
{
}
else
{
urllist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
}
// Storing at browser side
window.sessionStorage.setItem('url_list', JSON.stringify(urllist))
}
function goBkHist(a) {
var l_ref = ind - 2;
if (l_ref != 0)
{
var pageURL2 = urllist[l_ref];
ind = l_ref + 1;
alert(pageURL2);
loadUrl(pageURL2);
}
}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = urllist[l_ref_2];
ind = l_ref_2 + 1;
alert(pageURL2);
loadUrl(pageURL2);
}
function loadUrl(newLocation) {
window.location = newLocation;
location.reload();
return true;
}
</script>
</head>
<body>
<input type="button" value="BACK " onclick="goBkHist(-1)" />
<input type="button" value="FORWARD" onclick="goFdHist(1)" />
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.