使用Javascript或Jquery在浏览器中存储本地值的最佳方法是什么?

what is the best way to store local values in browser using Javascript or Jquery?

本文关键字：最佳 方法 是什么 存储 Javascript Jquery 浏览器 使用      更新时间：2023-09-26

我在数组中存储局部变量。但是当我尝试刷新页面时，数组变为空。我也想要页面引用后的先前值。

我在Javascript中尝试"上一个/下一个"功能。但是当我尝试重新加载页面时，数组中的值被删除了。

<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>

在这段代码中，如果我点击返回或转发显示的URL，但当我试图加载该URL时，页面被重新加载，数组中的值被删除。

我该如何处理这些问题。

是否有办法处理这种类型的存储与其他方法，如会话和cookie。

存储在sessionStorage中的值将在您关闭该选项卡时自动删除。

如果你在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>

您可以使用LocalStorage API在客户端持久化数据。如果您必须支持古老的浏览器，您可以编写一个简单的回退到cookie。请注意，LocalStorage有一些大小限制，如果我没记错的话，每个域大约有10MB。

查看这里的文档

您可以简单地使用localStorage.getItem和localStorage.setItem函数

您可以使用localStorage或sessionStorage通过localStorage，你可以这样做

localStorage.setItem("DataValue", "Your Value");

并通过

检索
localStorage.getItem("DataValue")

by sessionStorage its like 

sessionStorage.DataValue = "Your Value"

和检索

var Data = sessionStorage.DataValue

所有这些都是客户端特性。sessionStorage与浏览器的单独选项卡绑定，而localStorage将在整个浏览器中可用。

相关文章：