Показать/Скрыть блок с сохранением в куки, проблема с пробелами?

Question

[Chvalov]

Есть вод такой скрипт:

<script>
function _setCookie(name, value, expires, path, domain, secure) {
  document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}
 
function show_hide(num_id) {
var divstyle = new String();
    divstyle = document.getElementById(num_id).style.display;
        if (divstyle.toLowerCase() == "none" || divstyle == "") {
            document.getElementById(num_id).style.display="block";
            var date = new Date( new Date().getTime() + 1000*60*60*24*365); // ставим куку на 365 дней
            _setCookie(num_id, escape("block"), date.toUTCString(), "/");
        } else {
            document.getElementById(num_id).style.display="none";
            var date = new Date( new Date().getTime() + 1000*60*60*24*365); // ставим куку на 365 дней
            _setCookie(num_id, escape("none"), date.toUTCString(), "/");
        }
}
</script>
 
<div onclick="show_hide('block_1');">click</div>
<div id="block_1" style="display:<?=isset($_COOKIE['block_1'])? $_COOKIE['block_1'] : 'none'; ?>">content 1 по умолчанию скрыт</div>
<br />
<div onclick="show_hide('block_2');">click</div>
<div id="block_2" style="display:<?=isset($_COOKIE['block_2'])? $_COOKIE['block_2'] : 'none'; ?>">content 2 по умолчанию скрыт</div>
<br />
<div onclick="show_hide('block_3');">click</div>
<div id="block_3" style="display:<?=isset($_COOKIE['block_3'])? $_COOKIE['block_3'] : 'block'; ?>">content 3 по умолчанию показан</div>
<br />
<div onclick="show_hide('block_4');">click</div>
<div id="block_4" style="display:<?=isset($_COOKIE['block_4'])? $_COOKIE['block_4'] : 'block'; ?>">content 4 по умолчанию показан</div>

Начал переделывать под свои нужны чтобы не только скрывать блоки, но и менять иконку на кнопке для возврата блока обратно, но столкнулся с двумя проблемами:
1) Как нормально передать класс, а не стиль я так и не понял, оно всего лишь возвращает один раз и то не верно: glyphicon%20glyphicon-minus
Кусок кода:

<span id="span_pm" class="<?=isset($_COOKIE['span_pm'])? $_COOKIE['span_pm'] : 'glyphicon glyphicon-minus'; ?>" ></span>

2) Я не уверен что я правильно делаю это для смены класса, потому что если даже прописать название класса без пробела, оно возвращает один раз, при этом при нажатии но кнопку сам класс не меняется, но блок при этом скрывается

Answer 1

[Stalker_RED]

%20 это закодированный пробел. Появляется из-за использования escape().

возвращает один раз, при этом при нажатии но кнопку сам класс не меняется

Где что возвращается? Что вы имеете в виду?
Класс не меняется, да. В этом скрипте нет даже попыток менять какой-то класс.

Comments

[Chvalov]

Stalker_RED А как сделать что бы оно возвращало еще и класс ?
и как быт с пробелом в escape() ?

[Stalker_RED]

Chvalov: Какой класс? Где в вашем примере классы вообще?

[Chvalov]

Stalker_RED:

<span id="span_pm" class="<?=isset($_COOKIE['span_pm'])? $_COOKIE['span_pm'] : 'glyphicon glyphicon-minus'; ?>" ></span>

[Stalker_RED]

https://jsfiddle.net/cwxdd52b/

Всё запоминается. Куки не засраны. И php не нужен.

[Stalker_RED]

x = 'aaa'
console.log(x) // aaa
x += ' bb'
console.log(x) // aaa bb
x = ' z'
console.log(x) // z

[Chvalov]

Stalker_RED: А вот мой скрипт, сейчас он работает, но вот значение с куки он берет с %20

function show_hide_icon(span_id) {
var divstyle = new String();
    divstyle = document.getElementById(span_id).className;
        if (divstyle.toLowerCase() == 'glyphicon glyphicon-minus' || divstyle == "") {
            document.getElementById(span_id).className='glyphicon glyphicon-plus';
            var date = new Date( new Date().getTime() + 1000*60*60*24*365); // ставим куку на 365 дней
            _setCookie(span_id, escape('glyphicon glyphicon-plus'), date.toUTCString(), "/");
        } else {
            document.getElementById(span_id).className='glyphicon glyphicon-minus';
            var date = new Date( new Date().getTime() + 1000*60*60*24*365); // ставим куку на 365 дней
            _setCookie(span_id, escape('glyphicon glyphicon-minus'), date.toUTCString(), "/");
        }
}

Это можно исправить чтобы ничего нового не думать ?
Я использую иконки с классов bootstrap 3

[Stalker_RED]

Chvalov: Я же рассказал уже, в самом начале, что %20 появляется в результате работы escape()
Если бы вы не поленились почитать что это, вы бы узнали, что обратно можно всё декодировать при помощи unescape()
А еще вы бы узнали, что эта функция устарела ПЯТНАДЦАТЬ ЛЕТ назад.

[Stalker_RED]

Chvalov:

Это можно исправить чтобы ничего нового не думать ?

Можно Но вообще, думать - полезное занятие.

[Chvalov]

Stalker_RED: Спасибо большое, помогли !!

Answer 2

[Алексей]

Я стараюсь не засорять cookie. Поэтому использую одну переменную (массив настроек).

Преобразую его значения для сохранения
JSON.stringify(data)
распаковываю так
JSON.parse( Сохраненные данные )

Достоинство - можно обратиться один раз, при инициализации скриптов. Дальнейшие обращения к массиву в памяти.

Comments

[Chvalov]

Алексей а как оно хранит пробелы, не будет ли %20 ?

Как я понимаю вот что мне нужно:

jQuery.extend({
    stringify  : function stringify(obj) {
        var t = typeof (obj);
        if (t != "object" || obj === null) {
            // simple data type
            if (t == "string") obj = '"' + obj + '"';
            return String(obj);
        } else {
            // recurse array or object
            var n, v, json = [], arr = (obj && obj.constructor == Array);

            for (n in obj) {
                v = obj[n];
                t = typeof(v);
                if (obj.hasOwnProperty(n)) {
                    if (t == "string") v = '"' + v + '"'; else if (t == "object" && v !== null) v = jQuery.stringify(v);
                    json.push((arr ? "" : '"' + n + '":') + String(v));
                }
            }
            return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
        }
    }
});