как лучше хранить локальные значения в браузере с помощью Javascript или Jquery?

Я храню локальные переменные в массиве. Но когда я пытаюсь обновить страницу, массив становится пустым. Мне также нужны предыдущие значения после рефреров страниц.

Я пытаюсь» Предыдущая/Следующая » функциональность в Javascript. Он работает отлично .Но когда я пытаюсь перезагрузить страницу, значения в массиве удаляются.

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

В этом коде, если я нажимаю на Back или Forward URL, отображаемый, но когда я пытаюсь загрузить этот URL, он загружается страница и значения в массиве удаляются.

Как я могу справиться с этими проблемами.

Существует ли какой-либо способ обработки этого типа хранения с помощью других методов, таких как сеансы и файлы cookie.

3 ответа

  1. API LocalStorage можно использовать для сохранения данных на стороне клиента. Если вам нужно поддерживать старые браузеры, вы можете написать простой ответ на файлы cookie. Обратите внимание, что LocalStorage имеет некоторый предел размера, что-то около 10 МБ на домен, если я правильно помню.

    Ознакомьтесь с документацией здесь .

    Вы можете просто использовать localStorage.getItemи localStorage.setItemфункции.

  2. Вы можете использовать или localStoragesessionStorage
    LocalStorage вы можете сделать это, как

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

    и получить это

    localStorage.getItem("DataValue")
    

    по sessionStorage его как

    sessionStorage.DataValue = "Your Value"
    

    и восстановите мимо

    var Data = sessionStorage.DataValue
    

    все это клиентские функции. sessionStorageпривязка с отдельной вкладкой браузера, где в качестве localStorageбудет доступен по всему браузеру.

  3. Значение, сохраненное в sessionStorage, будет автоматически удалено при закрытии этой вкладки.

    Если вы храните значение в localStorage, оно не будет автоматически удалено, если вы не удалите его программно или данные браузера.

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