store.js - GitLite

KO | EN

gitlite — search

#javascript #react #ai #machine-learning #rust #docker #macos #java #windows #awesome #kubernetes #vue #security #mcp

store.js

(★ 13,984)

모든 유스케이스를 위한 크로스 브라우저 스토리지, 전 세계 웹에서 사용됩니다.

파일 탐색기

최종 버전 다운로드 (.zip)

- config.yml
- store.everything.js
- store.everything.min.js
- store.legacy.js
- store.legacy.min.js
- store.modern.js
- store.modern.min.js
- store.tests.js
- store.tests.min.js
- store.v1-backcompat.js
- store.v1-backcompat.min.js
- - json2.js
  - lz-string.js
- all.js
- all_tests.js
- compression.js
- compression_test.js
- defaults.js
- defaults_test.js
- dump.js
- dump_test.js
- events.js
- events_test.js
- expire.js
- expire_test.js
- json2.js
- json2_test.js
- observe.js
- observe_test.js
- operations.js
- operations_test.js
- update.js
- update_test.js
- v1-backcompat.js
- v1-backcompat_test.js
- - list-supported-browsers.js
  - saucelabs-api.js
  - saucelabs-platformSets.js
  - saucelabs.js
  - tunnel.js
- compile-builds.js
- create-tunnel.js
- release.sh
- run-browser-tests-live-reload.js
- run-node-tests.js
- run-saucelabs-tests.js
- store-engine.js
- util.js
- all.js
- cookieStorage.js
- localStorage.js
- memoryStorage.js
- oldFF-globalStorage.js
- oldIE-userDataStorage.js
- sessionStorage.js
- - all.js
  - gh-215.js
  - gh-235.js
  - gh-236.js
  - gh-239.js
- tests.js
- util.js
.gitignore
Changelog
COPYRIGHT
LICENSE
Makefile
package.json
README-More.md
README.md
sublime-storejs.sublime-project
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/marcuswestin/store.js

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd store.js

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i store

이 명령어를 터미널에 그대로 입력해 실행하세요.

// Example store.js usage with npm

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

3. Make

보통

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Make Linux/macOS는 보통 기본 설치되어 있습니다. Windows는 별도 설치(예: MSYS2, WSL)가 필요합니다.

make

생성된 빌드 설정을 바탕으로 실제 컴파일을 진행해 실행 파일을 만듭니다.

✅ 에러 없이 끝나면 성공입니다. 생성된 실행 파일을 직접 실행해보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Store.js
========
모든 사용 사례를 위한 크로스 브라우저 스토리지이며, 웹 전반에서 사용됩니다.
[![Circle CI](https://img.shields.io/circleci/project/github/marcuswestin/store.js.svg)](https://circleci.com/gh/marcuswestin/store.js)
[![npm version](https://badge.fury.io/js/store.svg)](https://badge.fury.io/js/store)
[![npm](https://img.shields.io/npm/dm/store.svg?maxAge=2592000)](https://npm-stat.com/charts.html?package=store)
Store.js는 2010년부터 존재해 왔습니다 ([첫 번째 커밋](https://github.com/marcuswestin/store.js/commit/cb0198c2c02ff5f17c084276eeb4f28c79849d5e), [v1 릴리스](https://news.ycombinator.com/item?id=1468802)). 이 라이브러리는 cnn.com, dailymotion.com 등 수만 개의 웹사이트에서 프로덕션 환경으로 사용되고 있습니다.
Store.js는 기본적인 키/값 저장 기능(`get/set/remove/each`)뿐만 아니라 풍부한 [스토리지](#user-content-storages) 플러그인 세트와 부가 [기능](#user-content-plugins)을 제공합니다.
1. [기본 사용법](#user-content-basic-usage)
- 시작하는 데 필요한 모든 것
- [API](#user-content-api)
- [설치](#user-content-installation)
2. [지원하는 브라우저](#user-content-supported-browsers)
- 거의 모든 브라우저 :)
- [지원하는 브라우저 목록](#user-content-list-of-supported-browsers)
3. [플러그인](#user-content-plugins)
- 추가적인 공통 기능
- [모든 플러그인 목록](#user-content-list-of-all-plugins)
- [플러그인 사용하기](#user-content-using-plugins)
- [나만의 플러그인 작성하기](#user-content-write-your-own-plugin)
4. [빌드](#user-content-builds)
- 자신에게 맞는 빌드 선택하기
- [기본 빌드 목록](#user-content-list-of-default-builds)
- [나만의 빌드 만들기](#user-content-make-your-own-build)
5. [스토리지](#user-content-storages)
- 스토리지는 기저의 지속성을 제공합니다
- [모든 스토리지 목록](#user-content-list-of-all-storages)
- [스토리지 제한](#user-content-storages-limits)
- [나만의 스토리지 작성하기](#user-content-write-your-own-storage)
기본 사용법
-----------
시작하기 위해 알아야 할 모든 것:
### API
store.js는 크로스 브라우저 로컬 스토리지를 위한 간단한 API를 제공합니다:
```js
// Store current user
store.set('user', { name:'Marcus' })
// Get current user
store.get('user')
// Remove current user
store.remove('user')
// Clear all keys
store.clearAll()
// Loop over all stored values
store.each(function(value, key) {
console.log(key, '==', value)
})
```
### 설치
npm 사용:
```sh
npm i store
```
```js
// Example store.js usage with npm
var store = require('store')
store.set('user', { name:'Marcus' })
store.get('user').name == 'Marcus'
```
스크립트 태그 사용 ([빌드](dist/) 중 하나를 먼저 다운로드하세요):
```html
```
지원하는 브라우저
------------------
거의 모든 브라우저 :)
모든 브라우저(IE 6, IE 7, Firefox 4 등 포함)를 지원하려면 `require('store')`(`require('store/dist/store.legacy')`의 별칭) 또는 [store.legacy.min.js](dist/store.legacy.min.js)를 사용하세요.
몇 킬로바이트를 아끼면서도 모든 최신 브라우저를 지원하려면 대신 `require('store/dist/store.modern')` 또는 [store.modern.min.js](dist/store.modern.min.js)를 사용하세요.
### 지원하는 브라우저 목록
- IE6+ 테스트 완료
- iOS 8+ 테스트 완료
- Android 4+ 테스트 완료
- Firefox 4+ 테스트 완료
- Chrome 27+ 테스트 완료
- Safari 5+ 테스트 완료
- Opera 11+ 테스트 완료
- Node 테스트 완료 (https://github.com/coolaj86/node-localStorage 사용)
플러그인
-------
플러그인은 일부 사용자가 필요로 할 수 있는 추가적인 공통 기능을 제공합니다:
### 모든 플러그인 목록
- [all.js](plugins/all.js): 모든 플러그인을 모아놓은 유용한 파일입니다.
- [defaults.js](plugins/defaults.js): 기본값을 선언합니다. [사용 예시](plugins/defaults\_test.js)
- [dump.js](plugins/dump.js): 저장된 모든 값을 덤프합니다. [사용 예시](plugins/dump\_test.js)
- [events.js](plugins/events.js): 저장된 값이 변경될 때 알림을 받습니다. [사용 예시](plugins/events\_test.js)
- [expire.js](plugins/expire.js): 지정된 시간이 지나면 저장된 값을 만료시킵니다. [사용 예시](plugins/expire\_test.js)
- [observe.js](plugins/observe.js): 저장된 값과 그 변경 사항을 관찰합니다. [사용 예시](plugins/observe\_test.js)

- [operations.js](plugins/operations.js): push, shift, assign과 같은 유용한 작업들입니다. [사용 예시](plugins/operations\_test.js)
- [update.js](plugins/update.js): 저장된 객체를 업데이트하거나, null인 경우 새로 생성합니다. [사용 예시](plugins/update\_test.js)
- [v1-backcompat.js](plugins/v1-backcompat.js): store.js v1과의 완벽한 하위 호환성을 제공합니다. [사용 예시](plugins/v1-backcompat\_test.js)
### 플러그인 사용하기
npm을 사용하는 경우:
```js
// Example plugin usage:
var expirePlugin = require('store/plugins/expire')
store.addPlugin(expirePlugin)
```
script 태그를 사용하는 경우, 모든 플러그인이 내장된 [store.everything.min.js](dist/store.everything.min.js)를 사용하거나, 이 저장소(repo)를 복제(clone)하여 빌드를 추가 또는 수정하고 `make build`를 실행할 수 있습니다.
### 나만의 플러그인 작성하기
store.js 플러그인은 스토어에 추가되는 객체를 반환하는 함수입니다.
플러그인 함수 중 일부가 기존 함수를 오버라이드(재정의)하더라도, 플러그인 함수는 첫 번째 인자(super\_fn)를 사용하여 여전히 원래 함수를 호출할 수 있습니다.
```js
// Example plugin that stores a version history of every value
var versionHistoryPlugin = function() {
var historyStore = this.namespace('history')
return {
set: function(super\_fn, key, value) {
var history = historyStore.get(key) || []
history.push(value)
historyStore.set(key, history)
return super\_fn()
},
getHistory: function(key) {
return historyStore.get(key)
}
}
}
store.addPlugin(versionHistoryPlugin)
store.set('foo', 'bar 1')
store.set('foo', 'bar 2')
store.getHistory('foo') == ['bar 1', 'bar 2']
```
플러그인 작성에 대해 더 궁금한 점이 있다면 알려주세요. 현재로서는 [현재 플러그인 목록](plugins/)을 살펴보는 것을 추천합니다. 좋은 플러그인 예시로는 [plugins/defaults](plugins/defaults.js), [plugins/expire](plugins/expire.js), [plugins/events](plugins/events.js)가 있습니다.
빌드
------
자신에게 알맞은 빌드를 선택하세요!
### 기본 빌드 목록
- [store.everything.min.js](dist/store.everything.min.js): 모든 플러그인과 모든 스토리지. [소스 코드](dist/store.everything.js)
- [store.legacy.min.js](dist/store.legacy.min.js): 테스트된 모든 브라우저에 대한 완전한 지원. 플러그인은 별도로 추가하세요. [소스 코드](dist/store.legacy.js)
- [store.modern.min.js](dist/store.modern.min.js): 모든 최신 브라우저에 대한 완전한 지원. 플러그인은 별도로 추가하세요. [소스 코드](dist/store.modern.js)
- [store.v1-backcompat.min.js](dist/store.v1-backcompat.min.js): [store.js v1](https://github.com/marcuswestin/store.js/releases/tag/v1.3.20)과의 완전한 하위 호환성. [소스 코드](dist/store.v1-backcompat.js)
### 나만의 빌드 만들기
npm을 사용하고 있다면 직접 빌드를 생성할 수 있습니다:
```js
// Example custom build usage:
var engine = require('store/src/store-engine')
var storages = [
require('store/storages/localStorage'),
require('store/storages/cookieStorage')
]
var plugins = [
require('store/plugins/defaults'),
require('store/plugins/expire')
]
var store = engine.createStore(storages, plugins)
store.set('foo', 'bar', new Date().getTime() + 3000) // Using expire plugin to expire in 3 seconds
```
스토리지
--------
Store.js는 사용 가능한 가장 최적의 스토리지를 선택하며, 작동하는 사용 가능한 첫 번째 스토리지로 자동 대체(fallback)됩니다:
### 모든 스토리지 목록
- [all.js](storages/all.js): 모든 스토리지를 한곳에 모아둔 유용한 파일입니다.
- [localStorage.js](storages/localStorage.js): localStorage에 값을 저장합니다. 모든 최신 브라우저에 적합합니다.
- [sessionStorage.js](storages/sessionStorage.js): sessionStorage에 값을 저장합니다.
- [cookieStorage.js](storages/cookieStorage.js): 쿠키에 값을 저장합니다. Safari 개인정보 보호 모드에서 유용합니다.
- [memoryStorage.js](storages/memoryStorage.js): 메모리에 값을 저장합니다. 언제나 스토리지 기능을 보장하기 위한 훌륭한 대체 수단입니다.
- [oldFF-globalStorage.js](storages/oldFF-globalStorage.js): globalStorage에 값을 저장합니다. 구형 Firefox 3+ 버전에만 유용합니다.
- [oldIE-userDataStorage.js](storages/oldIE-userDataStorage.js): userData에 값을 저장합니다. 구형 IE 6+ 버전에만 유용합니다.
### 스토리지 한계
각 스토리지마다 서로 다른 한계, 제한 사항 및 오버플로우 동작이 존재합니다.

n 다른 브라우저. 예를 들어, Android는 4.0에서 4.57M의 localStorage 제한이 있고, 4.1에서는 2.49M, 4.2에서는 4.98M의 제한이 있습니다... 그렇습니다.
복잡함을 줄이기 위해 교차 브라우저 동작을 보장하는 다음과 같은 권장 사항을 제공합니다.

| Storage | Targets | Recommendations | More info |
|:----------------|:-----------------------|:--------------------------------|:-------------------------------------------------|
| all | All browsers | 100만 자 미만 저장 | (Safari Private 모드 제외) |
| all | All & Private mode | 3만 2천 자 미만 저장 | (Safari Private 모드 포함) |
| localStorage | Modern browsers | 최대 2mb (~100만 자) | [limits][local-limits], [android][local-android] |
| sessionStorage | Modern browsers | 최대 5mb (~200만 자) | [limits][session-limits] |
| cookieStorage | Safari Private mode | 최대 4kb (~2천 자) | [limits][cookie-limits] |
| userDataStorage | IE5, IE6 & IE7 | 최대 64kb (~3만 2천 자) | [limits][userdata-limits] |
| globalStorage | Firefox 2-5 | 최대 5mb (~200만 자) | [limits][global-limits] |
| memoryStorage | All browsers, fallback | 페이지 간에 데이터가 유지되지 않습니다! | |

[local-limits]: https://arty.name/localstorage.html
[local-android]: http://dev-test.nemikor.com/web-storage/support-test/
[session-limits]: http://stackoverflow.com/questions/15840976/how-large-is-html5-session-storage
[cookie-limits]: http://browsercookielimits.squawky.net/
[userdata-limits]: https://msdn.microsoft.com/en-us/library/ms533015(v=vs.85).aspx
[global-limits]: https://github.com/jeremydurham/persist-js/blob/master/README.md#4-size-limits
[more]: https://www.html5rocks.com/en/tutorials/offline/quota-research/

### 나만의 Storage 작성하기
다른 storage가 필요할 일은 거의 없을 것입니다. 하지만 만약 필요하다면...
예제는 [storages/](storages/)를 참고하세요. 좋은 예시로 [memoryStorage](storages/memoryStorage.js)와 [localStorage](storages/localStorage.js)가 있습니다.
기본적으로 다음과 같은 형태의 객체만 있으면 됩니다.

```js
// Example custom storage
var storage = {
name: 'myStorage',
read: function(key) { ... },
write: function(key, value) { ... },
each: function(fn) { ... },
remove: function(key) { ... },
clearAll: function() { ... }
}
var store = require('store').createStore(storage)
```