Почему кука обрезается на 330 символов?

Question

[Ilia Malashko]

Здравствуйте.

Мне необходимо данные из формы сохранить в куки и использовать их на другой странице на бекенде.

Через js я сохраняю все данные в json-е

document.cookie = 'card_new=' + JSON.stringify(params)

После на нужной странице получаю их на бекенде.

На десктопах и андройде все работает как положенно, но при тестировании на iphone кука 'card_new' обрывается на 330 символов, соотвественно json получается не полный и "битый".
Я попытался нагуглить, ни где не нашел какие то ограничения на запись куки, на самом телефоне нет ограничений, памяти достаточно.
Проверил JSON.stringify(params) перед записью в куки, он всегда полный. Проблема именно в куках.
В чем может быть проблема? Как то можно айфон уговорить сохранить все данные?

P.S. Строка прерывается на месте указанном на скриншоте:

Comments

[ThunderCat]

Предполагаю что это какой-то очередной закидон эпла. Используйте локалсторэйдж.
Хотя возможно какой-то символ "ломает" жсон (или просто криво ложится именно в эпловые девайсы) именно на айфоновской версии софта, попробуйте сначала урлэнкод на строку, а потом уже в жсон перегонять. Ну или наоборот - жсон в урленкод.

[Владислав Лысков]

ThunderCat,

Используйте локалсторэйдж.

ему же дальше это нужно получить на бэкэнде

[ThunderCat]

Владислав Лысков, а че, адекватных средств обмена данными с бэкендом кроме кук не придумали? Алсо, первым на самом деле стоить проверить строку на косячные символы и сделать ее "безопасной" для хранения.

[alexalexes]

А у вас не перегружено хранилище кук токенами систем авторизации/трекерами c http only атрибутами?
Такие куки не будут проецироваться в document.cookie, но они будут входить в общий лимит для передачи на сервер.
Вполне возможно, ваши незащищенные от JS куки встраиваются в конце длинного списка кук, которые созданы на сервере и обрезаются по лимитам.
'card_new=' + JSON.stringify(params)
Вообще, такие вещи передаются либо скрытыми полями в форме, если активно не используется ajax, либо добавляются в объект formData и передаются через ajax/fetch, либо дополняют json объект и опять же фетчат в API, если у вас API принимает json.
Как интерпретировать переданные параметры и сохранить контекст для другой формы - это задача для сессионного окружения переменных серверного скрипта.
В куках, обычно, хранится идентификатор сессии, а на стороне сервера уже по идентификатору получают весь остальной контекст. Не нужно весь контекст таскать в куках.
Использование кук - это про хранение коротких токенов, которые можно пересчитать по пальцам одной/двух рук, и в ограниченном количестве.

Answer 1

[ThunderCat]

Короче, есть 3 с половиной решения:
1) Половина раз - сконвертировать полученную жсон строку в бэйс64 или урленкод, класть в куки. Это просто и решается декодом стрки на стороне сервера за 2 минуты. Половина два - разобраться что за символ ломает строку, тупо сравнив что лежит в куках и что дает стрингифай. Что делать - уже решать по ситуации, может конкретно какой-то параметр привести к нормальному формату и все.
2) Покласть все нужное в локалстораж, при обращении к нужной странице передавать данные любым удобным способом, вплоть до гет параметра в урл.
3) Если данные нужны для страницы на бэкенде, логичнее хранить их на бэкенде, в сессии, бд или любом другом хранилище на стороне сервера.

Comments

[Ilia Malashko]

Добавил скрин. Разрыв в "безобидном" месте, но все таки вы правы, проблема скорее всего в символах "[]", но строка прерывается почему то только перед "Ср", что мне непонятно.
В итоге достаточно было обернуть ключ и значение в encodeURIComponent(), даже декодировать не пришлось на стороне бекенда.

Вариант №3 что вы предложили я так же рассматривал как альтернативу, но мне он не нравится из-за усложнения кода и из-за доп нагрузки на сервер (данные в json добавляются при изенении в инпутах).

Спасибо за помощь. Решение оказалось максимально простым.

Answer 2

[Артём Дайнов]

Такое лучше не делать.
Я так понимаю вы хотите сохранить корзину. Но при проектирование магазинов такое нельзя делать.
Это не лучший вариант. Куку можно отредактировать и тд.
Обычно для этого создаётся связующая таблица и выглядит всё примерно так.
1. Пользователь пришел на сайт. Выдали ему уникальный номер. Для уникальных номеров кто что использует. Но я обычно создаю отдельную таблицу.
2. Создаётся связующая таблица между объектом товара и пользователем. В нее помещается id объекта товара, id пользователя и прочая информация, типа цена, скидка, количество.
3. Всё. Далее, где вам нужно получить эту информацию, получайте уникальный номер пользователя, который вы в куках сохранили, и подтягивайте её.
Ну а что по самой куки, то тут есть ограничения на 4 килобайта информации. Но вы должны учитывать, что в эти 4кб входит не только содержимое, но и настройки самой куки.
Да и каждый браузер может вести себя по разному.