HTML5에서 localStorage 객체는 페이지 / 도메인마다 분리되어 있습니까?


172

HTML5 localStorage 객체가 페이지 / 도메인마다 분리되어 있습니까? localStorage 키의 이름을 지정하는 방법이 궁금합니다. 별도의 접두사가 필요합니까? 아니면 내가 원하는대로 이름을 지정할 수 있습니까?


나는 항상 localStorage를 사용할 수있는 사용자 스크립트와의 충돌을 피하기 위해 접두사를 사용합니다.
Benjol

IMO 페이지가 아닌 충돌을 피해야하는 것은 사용자 스크립트입니다. 내 사용자 스크립트에서 스크립트 이름을 붙인 접두사를 사용하고 있습니다.
Camilo Martin

답변:


195

도메인 및 포트 ( 동일한 원본 정책과 동일한 분리 규칙 )에 따라 페이지별로 location또는 다른 접근 방식을 기반으로 키를 사용해야합니다 .

접두사 가 필요 하지 않지만 필요한 경우 접두사를 사용하십시오. 또한 예, 원하는 이름을 지정할 수 있습니다.


77
protocol://host:port조합 마다 고유 합니다.
thasmo

1
www.mysite.it:8012/App1 및 www.mysite.it:8012/App2에 로컬 스토리지가 공유되어 있습니까?
DarioN1 2016 년

3
@ DarioN1 예, www.mysite.it:8012/App1 및 www.mysite.it:8012/App2는 로컬 스토리지를 공유했습니다. (주의 : EG http와 https 등의 다른 프로토콜에서 액세스 할 경우 공유되지 않습니다. 동일한 프로토콜, 하위 도메인, 도메인 및 포트 내에서 공유됩니다. 이는 '원본'개념을 단순화 한 것입니다. )
William

31

상점은 원점별로 있으며 "원점"은 동일한 원점 정책 (스키마 [ httpvs. https등], 포트 및 호스트의 조합)과 동일합니다. 에서 사양 :

각 최상위 찾아보기 컨텍스트에는 고유 한 세션 저장 영역 세트가 있으며 각 출처마다 하나씩 있습니다.

따라서 스토리지 http://a.example.com와 스토리지 는 모두 서로 다른 호스트 http://b.example.com이므로 별도 (및 둘 다 별도 http://example.com)입니다. 마찬가지로, http://example.com:80http://example.com:8080https://example.com모든 다른 기원이다.

한 저장소에서 다른 저장소에 액세스 할 수 있도록하는 웹 저장소에는 메커니즘이 없습니다.

그것의주의 의 기원 이 아닌 URL, 그래서 http://example.com/page1http://example.com/page2의 저장에 액세스 할 수 모두 http://example.com.


3
이것은 개발을 시작한 사람들에게조차도 읽고 완전히 설명하기 쉽기 때문에이 답변을 가장 좋아했습니다.
baHI

1
"한 저장소가 다른 저장소에 액세스 할 수 있도록하는 웹 저장소에는 메커니즘이 없습니다."
Fabien Quatravaux

7

예, 각 도메인 / 하위 도메인에는 서로 다른 localStorage가 있으며 원하는대로 키를 호출 할 수 있습니다 (접두사가 필요하지 않음).

키를 얻으려면 다음과 같은 메소드 키 (색인)를 사용할 수 있습니다

localStorage.key(0);

localStorage를 여러 개 가질 수 있기 전에 globalStorage 라는 객체 가 있었지만 사양에서 더 이상 사용되지 않습니다.


7

다른 사람들이 지적했듯이 localStorage는 프로토콜, 호스트 및 포트마다 고유합니다. 접두사가 붙은 키로 스토리지를 제어하는 ​​편리한 방법을 원한다면 localDataStorage를 제안 합니다 .

키를 접두사로 사용하여 동일한 도메인 내에서 세그먼트 공유 스토리지를 시행 할 수있을뿐만 아니라, 자바 스크립트 데이터 유형 (Array, Boolean, Date, Float, Integer, String 및 Object)을 투명하게 저장하고, 가벼운 데이터 난독 화를 제공하고, 문자열을 자동으로 압축하고, 키별 (이름) 별 쿼리와 (키별) 값별 쿼리를 용이하게합니다.

[DISCLAIMER] 본인은 [/ DISCLAIMER] 유틸리티의 저자입니다.

예 :

// instantiate our first storage object
// internally, all keys will use the specified prefix, i.e. passphrase.life
var localData = localDataStorage( 'passphrase.life' );

localData.set( 'key1', 'Belgian' )
localData.set( 'key2', 1200.0047 )
localData.set( 'key3', true )
localData.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localData.set( 'key5', null )

localData.get( 'key1' )   -->   'Belgian'
localData.get( 'key2' )   -->   1200.0047
localData.get( 'key3' )   -->   true
localData.get( 'key4' )   -->   Object {RSK: Array(5)}
localData.get( 'key5' )   -->   null


// instantiate our second storage object
// internally, all keys will use the specified prefix, i.e. prismcipher.com
var localData2 = localDataStorage( 'prismcipher.com' );

localData2.set( 'key1', 123456789 )  // integer

localData2.get( 'key1' )   -->   123456789

보시다시피, 기본 값이 존중되며 여러 인스턴스를 만들어 스토리지를 제어 할 수 있습니다.


0

Nick이 제안한 것처럼 해당 도메인의 어느 곳에서나 사용할 수 있습니다. 대안으로 sessionStorage는 브라우저 창 자체와는 다른 점에서 약간 다르게 작동합니다. 즉, 동일한 도메인의 다른 탭이나 창은 동일한 스토리지 개체 ​​사본에 액세스 할 수 없습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.