Pure js는 무제한 space_javascript 기술로 로컬 스토리지를 구현합니다.-JS 튜토리얼-php.cn

Pure js는 무제한 space_javascript 기술로 로컬 스토리지를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:54:14

원래의

1477명이 탐색했습니다.

오랜만에 블로그를 작성하다 보니 2년 전에 소스코드를 공개하겠다고 약속했는데 드디어 순수 JS를 이용하여 공간이 무제한인 로컬 스토리지 기능을 오픈소스화하게 됐습니다. .

프로젝트 주소https://github.com/xueduany/localstore,

데모 보기http://xueduany.github.io/localstore/,

일반적인 원칙에 대해 간략하게 소개하겠습니다. 구체적인 내용과 예외 처리에 대해서는 나중에 기회가 되면 따로 다루겠습니다

먼저 localStorage 돌파 원리에 대해 이야기해 보겠습니다. 공식 단어는 다음과 같습니다 http://www.w3.org/TR/2013/PR-webstorage-20130409/

아시다시피 여러 하위 도메인의 localStorage가 서로 의존하지 않는다는 점을 활용하여 여러 하위 도메인의 localStorage를 통해 storePool을 설계하고 구현하여 상한선을 뛰어넘을 수 있습니다

그러면 실제 API가 저장될 때 localStorage에는 저장되지 않습니다

관리자 모드와 조금 비슷합니다. 즉, 저장하고 싶은 것을 창고관리자에게 말하면, 창고관리자가 열쇠를 주고, 그 열쇠를 해당 창고로 가져가서 물건을 보관하는 방식입니다. 그러면 관리자가 당신에게 토큰 인증서를 줍니다. 앞으로는 이 인증서만 가지고 있으면 저장된 물건을 꺼낼 수 있습니다.

localStorage와 유사한 API를 구현하기만 하면 최종 사용자는 내 데이터가 어디에 저장되어 있는지 신경 쓸 필요가 없습니다

그런 다음 창고 관리자 역할을 할 js 개체를 설계합니다. 이 관리자는 몇 개의 토큰을 지원해야 합니까? 그러면 해당 저장된 항목은 어디에 저장되어야 합니까? 우리는 이러한 데이터 구조 세트를 설계하고 구현해야 합니다

해당 키 아래에는 해당 데이터가 존재하는 창고의 주소와 보관 시간이 표시됩니다. 보관 기간의 개념은 데이터의 신선도, 즉 만료 여부를 계산하는 데 사용됩니다.

따라서 먼저 여러 도메인 이름으로 프록시 파일을 로드하고 HTML5 API postMessage 또는 기존 페이지 교차 도메인 방법을 통해 서로 상호 작용하고 이 프록시의 프록시를 통해 데이터를 저장하기 위해 여러 iframe을 만들어야 합니다.

데이터 키의 스텁을 현재 기본 도메인 이름에 저장한 후 실제 데이터를 각 하위 도메인 이름에 저장합니다

자, 이제 저장 용량이 초과되었으므로 웹페이지를 저장하려면 웹페이지와 관련된 모든 정적 리소스를 끌어내리는 것을 고려해야 합니다. js, css를 포함한 웹페이지 관련 리소스는 모두 다음과 같습니다. ajax 요청이 이루어지면 콘텐츠를 얻을 수 있습니다. 고려해야 할 유일한 것은 도메인 간 문제로 인해 js가 응답 데이터를 얻을 수 없다는 것입니다. CDN 노드 서버의

에 대한 응답 헤더입니다.