Файлы cookie, localStorage и данные jquery для хранения информации о размере и местоположении - PullRequest
Новая
       0

Файлы cookie, localStorage и данные jquery для хранения информации о размере и местоположении

3 голосов
/ 03 августа 2011

Каков наилучший вариант для хранения информации о размере и положении для изменяемых размеров перетаскиваемых элементов?У меня есть страница, на которой будет много изменяемых размеров div-ов.Состояние div (вверху, слева, ширине, высоте) должно быть восстановлено, когда пользователь снова заходит на страницу.Я сделал один тест с файлами cookie, которые сработали, но это может быть неправильно, если есть много div.Я проверил данные JQuery, но, похоже, проблема.Этот код возвращает неопределенное значение для данных, полученных при загрузке следующей страницы. 

<script>
    function getdivinfo() {
        var position = $( "#compage" ).position(); 
        var width = $( "#compage" ).width(); 
        var height= $( "#compage" ).height(); 
        var left = position.left;
        var top = position.top;

        $( "#compage" ).data("layout", { "dleft": left, "dtop": top, "dwidth": width, "dheight": height });
    }

   function divlayout() {

        var restleft = $( "#compage" ).data("layout").dleft;
        var resttop = $( "#compage" ).data("layout").dtop;
        var restwidth = $( "#compage" ).data("layout").dwidth;
        var restheight = $( "#compage" ).data("layout").dheight;

        $( "#compage" ).css("top", resttop);
        $( "#compage" ).css("left", restleft);
        $( "#compage" ).css("width", restwidth);
        $( "#compage" ).css("height", restheight);

    }

</script>

HTML-информация 

<body onload="divlayout();">

<div class="demo">

<div id="compage" class="ui-widget-content">
    <h3 class="ui-widget-header">Sample</h3>
</div>

<a href="#" onclick="getdivinfo();">Get div info</a>

<a href="#" onclick="savedivinfo();"> Save div info</a>

</div><!-- End demo -->

Ответы [ 2 ]

4 голосов
/ 03 августа 2011

Данные JQuery не сохраняются, они действительны только до тех пор, пока загружен HTML.Локальное хранилище будет лучшим решением, но оно не поддерживается старыми браузерами, и их все еще много.Файлы cookie - это хорошее решение, в конечном итоге используйте меньше файлов cookie с более длинными значениями или множество файлов cookie с меньшими значениями, в зависимости от того, какой предел, по вашему мнению, вы достигнете.

Очевидно, сохранение его на стороне сервера было бы здорово:)

0 голосов
/ 04 августа 2011

Решили пойти с куки, содержащими массивы, преобразованные в строки.Для каждого div я создаю cookie, который использует функцию join для создания строки из массива переменных.Чтобы прочитать информацию о файлах cookie, я разбил строку на массив. 

    <script>
        function getdivinfo() {
            var position = $( "#compage" ).position(); 
            var width = $( "#compage" ).width(); 
            var height= $( "#compage" ).height(); 
            var left = position.left;
            var top = position.top;

            var divarray = new Array();
            divarray[0] = left;
            divarray[1] = top;
            divarray[2] = width;
            divarray[3] = height;

            arraycookie = divarray.join('|');  

            setCookie("compage", arraycookie, 600);

        }

        function restorediv() {

            var arraycookie = getCookie("compage");
            if ( arraycookie == "" ) return;
            var divarray = arraycookie.split('|');

            var restleft = divarray[0]; 
            /* if (restleft == "") return; */
            var resttop = divarray[1]; 
            /* if (resttop == "") return; */
            var restwidth = divarray[2];
            /* if (restwidth == "") return; */
            var restheight = divarray[3];
            /* if (restheight == "") return; */

            $( "#compage" ).css("top", resttop);
            $( "#compage" ).css("left", restleft);
            $( "#compage" ).css("width", restwidth);
            $( "#compage" ).css("height", restheight);
        }

    </script>

Информация HTML 

<body onload="restorediv();">
<div class="demo">
<div id="compage" class="ui-widget-content">
    <h3 class="ui-widget-header">Sample</h3>
</div>
<a href="#" onclick="getdivinfo();">Get div info</a>
</div><!-- End demo -->
...