jquery는 쿠키에 json 데이터 객체를 저장합니다.


108

쿠키에 JSON 데이터를 저장하려면 어떻게해야합니까?

내 JSON 데이터는 다음과 같습니다.

$("#ArticlesHolder").data('15', {name:'testname', nr:'4',price:'400'});
$("#ArticlesHolder").data('25', {name:'name2', nr:'1', price:'100'});
$("#ArticlesHolder").data('37', {name:'name3', nr:'14', price:'60'});

그리고 나는 다음과 같은 것을하고 싶다.

var dataStore = $.cookie("basket-data", $("#ArticlesHolder").data());

데이터를 검색하는 난에로드 할 $("#ArticlesHolder")같은

$.each($.cookie("basket-data"), function(i,e){
 $("#ArticlesHolder").data(i, e);
});

내가 올바른 길을 가고 있는지 아니면 다른 방식으로해야하는지 아는 사람이 있습니까? 간단히 말해서, 쿠키에서 json 데이터를 어떻게 넣고 가져 오나요?


8
단지 현명하지만 질문에 "JSON 데이터"가 없습니다. 객체 리터럴 표기법 (JSON이 아님, JSON은 객체 리터럴 표기법의 하위 집합)을 통해 정의한 일부 JavaScript 객체가 있지만 거기에는 JSON이 없습니다. json.org 하지만 쿠키 문자열에 객체를 저장하기위한 데이터 형식으로 JSON 을 사용 하고 싶을 것 입니다.
TJ Crowder

답변:


195

다음과 같이 데이터를 JSON으로 직렬화 할 수 있습니다.

$.cookie("basket-data", JSON.stringify($("#ArticlesHolder").data()));

그런 다음 쿠키에서 가져 오려면 :

$("#ArticlesHolder").data(JSON.parse($.cookie("basket-data")));

이전 브라우저 (IE <8)에는 기능 을 가져 오기 위해 json2.js 가 포함 JSON.stringify()되어JSON.parse() 있으므로 이는 데이터 개체 에 의존 하고 직렬화 / 역 직렬화합니다 . 이 예에서는 jQuery 쿠키 플러그인을 사용합니다.JSON


2
고대부터 Opera의 쿠키에는 JSON이 허용되지 않습니다. my.opera.com/community/forums/… 또한이 오류가 있습니다. @ cookie @ 플러그인이 @ encodeURIComponent @를 사용하더라도 pbug가 나타나지 않아야합니다.
kirilloid

1
이 질문과 대답은 그것이 cookiejQuery의 내장 함수 라고 믿게 만듭니다. 그렇지 않은 것 같습니다. 또는 더 이상 사용되지 않습니다 ..? 내가 찾은 플러그인이라면 그에 연결하면 혼란을 피하는 것이 좋을 것입니다.
TJ

1
@TJ 실제로 플러그인, jQuery 쿠키 플러그인입니다. 여기에서 찾을 수 있습니다 : plugins.jquery.com/cookie 이 시점에서 코어에없는 이유가 궁금합니다 ...
Nick Craver

일부 브라우저에서는 사용에주의하십시오. ,(쉼표) 문자는하지에 쿠키가 사파리 등의 브라우저에서 올바르게 설정 될 수 있습니다.
Matt Seymour

jQuery가 필요하지 않은 경우이 훌륭한 경량 쿠키 라이브러리를 사용할 수도 있습니다. [ developer.mozilla.org/en-US/docs/Web/API/document/cookie] lib
RyBolt

40

이제 이미 JSON.stringify명시 적으로 사용할 필요가 없습니다 . 이 코드 줄을 실행하십시오.

$.cookie.json = true;

그 후 쿠키에 객체를 저장할 수 있으며, 쿠키를 읽을 때 JSON으로 자동 변환되고 JSON에서 다시 돌아옵니다.

var user = { name: "name", age: 25 }
$.cookie('user', user);
...

var currentUser = $.cookie('user');
alert('User name is ' + currentUser.name);

하지만 JSON 라이브러리에는 jquery.cookie가 포함되어 있지 않으므로 직접 다운로드하여 jquery.cookie.js 앞에 HTML 페이지에 포함시켜야합니다.


3
$ .cookie.json = true없이이 방법을 시도하고 [object object]를 쿠키 값으로 얻었습니다. 그런 다음이를 true로 설정하고 개체를 쿠키에 직접 전달하려고 시도했지만 쿠키가 채워지지 않았습니다.
JacobRossDev 2013-08-26

@ jacobross85 나는 우리 중 일부가 jquery.cookie.js의 이전 버전을 사용하고있을 가능성이 있다고 생각합니다. 소스 코드를 확인하십시오. 때로는 잘못된 파일이 활성화되어 있습니다.
Dexter

이렇게하면 쿠키가 보편적으로 JSON으로 취급됩니다. 결과적으로 맹목적으로 추가 $cookie.json = true하면 다른 쿠키와 충돌 할 수 있습니다. 따라서 이미 다른 곳에서 쿠키를 사용하는 프로젝트에서 이것을 사용하는 데주의하십시오!
Eric Tjossem 2015 년

복잡한 json에 대한 해결책이 있습니까? 나는 어떤 속성이 JSON 등을 포함 내 JSON의 JSON 배열 ....이
nasim jahednia

7

사용 JSON.stringify(userData)문자열로 coverty의 JSON 개체에.

var dataStore = $.cookie("basket-data", JSON.stringify($("#ArticlesHolder").data()));

쿠키 사용에서 돌아 가기 위해 JSON.parse()

var data=JSON.parse($.cookie("basket-data"))

4

반환 된 값을 JSON.stringify(userData)쿠키 에 저장하는 것은 좋지 않습니다 . 일부 브라우저에서 버그가 발생할 수 있습니다.

사용하기 전에 base64 로 변환 (사용 btoa)하고 읽을 때 base64 에서 변환 (사용 atob)해야합니다.

val = JSON.stringify(userData)
val = btoa(val)

write_cookie(val)

3
이것에 문제가있는 브라우저에 대한 언급이 있습니까?
Marthin

1
django 플랫폼의 크롬에서 json 목록을 쿠키로 사용합니다. 몇 가지 문제가 있습니다. 또한 쿠키가 전달한 실제 데이터를 사용자로부터 숨기는 것이 항상 더 좋습니다
Eyal Ch

1
서버 측에서, 파이썬의 표준 쿠키 처리가 포함 된 쿠키를 거부 {또는 }, 조용히 쿠키 헤더의 거부 쿠키를 따라 쿠키를 놓습니다.
snakecharmerb

2

데이터를 JSON 및 Base64로 직렬화하면 종속성 jquery.cookie.js :

var putCookieObj = function(key, value) {
    $.cookie(key, btoa(JSON.stringify(value)));
}

var getCookieObj = function (key) {
    var cookie = $.cookie(key);
    if (typeof cookie === "undefined") return null;
    return JSON.parse(atob(cookie));
}

:)


0

이것을 시도하십시오 : https://github.com/tantau-horia/jquery-SuperCookie

빠른 사용법 :

생성-쿠키 생성

확인-존재 여부 확인

확인-JSON 인 경우 쿠키 값 확인

check_index-JSON에 인덱스가 있는지 확인

read_values-쿠키 값을 문자열로 읽습니다.

read_JSON-쿠키 값을 JSON 객체로 읽습니다.

read_value-JSON 객체에 저장된 인덱스 값 읽기

replace_value-JSON 개체에 저장된 지정된 인덱스의 값을 바꿉니다.

remove_value-JSON 객체에 저장된 값 및 인덱스 제거

다음을 사용하십시오.

$.super_cookie().create("name_of_the_cookie",name_field_1:"value1",name_field_2:"value2"});
$.super_cookie().read_json("name_of_the_cookie");
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.