
The goals
๐ช๐ปWhat & Why?

Difference Between Local Storage, Session Storage And Cookies
Local Storage | Session Storage | Cookies |
The storage capacity of local storage is 5MB/10MB | The storage capacity of session storage is 5MB | The storage capacity of Cookies is 4KB |
As it is not session-based, it must be deleted via javascript or manually | Itโs session-based and works per window or tab. This means that data is stored only for the duration of a session, i.e., until the browser (or tab) is closed | Cookies expire based on the setting and working per tab and window |
The client can only read local storage | The client can only read local storage | Both clients and servers can read and write the cookies |
There is no transfer of data to the server | There is no transfer of data to the server | Data transfer to the server is exist |
There are fewer old browsers that support it | There are fewer old browsers that support it | It is supported by all the browser including older browser |

The HTTP protocol is one of the most important protocols for smooth communication between the server and the client. The main disadvantage of the HTTP protocol it is a stateless protocol that means it does not track any kind of information of response and request by the server and the client, So in order to resolve this problem, there are three ways to track useful information In this article we are going to see the difference between Local Storage, Session Storage, and Cookies and why itโs important for a web developer to know these terms.
Local Storage: This read-only interface property provides access to the Documentโs local storage object, the stored data is stored across browser sessions. Similar to sessionStorage, except that sessionStorage data gets cleared when the page session ends โ that is when the page is closed. It is cleared when the last โprivateโ tab of a browser is closed (localStorage data for a document loaded in a private browsing or incognito session).
DOMStrings are storage formats that use UTF-16 to encode data, which uses two bytes per character. Strings are automatically generated from integer keys just as they are for objects. The data stored in LocalStorage is specific to a protocol in the document. If the site is loaded over HTTP (e.g., http://example.com), localStorage returns a different object than if it is loaded over HTTPS (e.g., https://abc.com).
If a document is loaded from a file: URL (that is, directly from the userโs local file system instead of being loaded from the server) the requirements for behavior are undefined and may vary among different browsers. Each file appears to be returned a different object by localStorage in all current browsers: URL. Essentially, it seems to be a case of each URL: file having its own unique local storage area.
This behavior cannot be guaranteed because as mentioned above, the file: URL requirements remain unclear. As such, thereโs a possibility that browsers may change how they handle files at any time. The way some browsers handle it has evolved.
What is Session Storage?
Session Storage objects can be accessed using the sessionStorage read-only property. The difference between sessionStorage and localStorage is that localStorage data does not expire, whereas sessionStorage data is cleared when the page session ends.
A unique page session gets created once a document is loaded in a browser tab. Page sessions are valid for only one tab at a time. Pages are only saved for the amount of time that the tab or the browser is open; they do not persist after the page reloads and restores. A new session is created each time a tab or window is opened; this is different from session cookies. Each tab/window that is opened with the same URL creates its own sessionStorage.When you duplicate a tab, the sessionStorage from the original tab is copied to the duplicated tab. Closing a window/tab ends the session and clears sessionStorage objects.
A pageโs protocol determines what data is stored in sessionStorage. Particularly, data stored by scripts accessed through HTTP (for example, http://abc.com) is stored in a separate object from the same site accessed through HTTPS (for instance, https://abc.com). A DOMString number is two bytes per character in UTF-16 DOMString format. Strings are automatically generated from integer keys just as they are for objects.
Cookie: The term โcookieโ refers to just the textual information about a website. In order to recognize you and show you results according to your preferences, this website saves some information in your local system when you visit a particular website. The history of the internet has long been marked by the use of cookies. A website visitor asks the server for a web page when they visit it. Every request for a server is unique. Likewise, if you visit a hundred times, each request will be considered unique by the server. Since a server receives many requests every second, storing every userโs information on a server doesnโt seem logical and obvious. The same information may not be needed again if you donโt return. Therefore, a cookie is sent and stored on your local machine to uniquely identify you. You will receive a response from the same server the next time you hit it since it recognizes you. Almost every server uses this cookie (some exceptions exist today because of advertisements). Therefore, although you might have many cookies in your system, such cookies will be recognized by a server and analyzed.
When cookies were first developed, they were used to better the developerโs experience. Consider visiting a website in a language other than your native one (letโs say English). You can select English as your language from the websiteโs language section. It might be necessary to switch languages five times a day if you visit the same website five times. These details are therefore stored in a cookie on your system. This ensures that the server knows that you wish to view the website in English the next time you send a request. Cookies are vital in this regard. The scale cookies used today are much smaller than the example above.
์ฟ ํค
- ์ฟ ํค๋ ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ ) ๋ก์ปฌ์ ์ ์ฅ๋๋ ํค์ ๊ฐ์ด ๋ค์ด์๋ ์์ ๋ฐ์ดํฐ ํ์ผ.
- document.cookieํ๋ฉด ํ์ฌ ์ฟ ํค ์ ๋ณด๊ฐ ๋์ด.
- ์ฌ์ฉ์ ์ธ์ฆ์ด ์ ํจํ ์๊ฐ์ ๋ช ์ํ ์ ์์ผ๋ฉฐ, ์ ํจ ์๊ฐ์ด ์ ํด์ง๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ์ข ๋ฃ๋์ด๋ ์ธ์ฆ์ด ์ ์ง๋จ.
- ์ฟ ํค๋ ํด๋ผ์ด์ธํธ์ ์ํ ์ ๋ณด๋ฅผ ๋ก์ปฌ์ ์ ์ฅํ๋ค๊ฐ ์ฐธ์กฐํฉ๋๋ค.
- ํด๋ผ์ด์ธํธ์ 300๊ฐ๊น์ง ์ฟ ํค์ ์ฅ ๊ฐ๋ฅ, ํ๋์ ๋๋ฉ์ธ๋น 20๊ฐ์ ๊ฐ๋ง ๊ฐ์ง ์ ์์, ํ๋์ ์ฟ ํค๊ฐ์ 4KB๊น์ง ์ ์ฅํฉ๋๋ค.
- Response Header์ Set-Cookie ์์ฑ์ ์ฌ์ฉํ๋ฉด ํด๋ผ์ด์ธํธ์ ์ฟ ํค๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
- ์ฟ ํค๋ ์ฌ์ฉ์๊ฐ ๋ฐ๋ก ์์ฒญํ์ง ์์๋ ๋ธ๋ผ์ฐ์ ๊ฐ Request์์ Request Header๋ฅผ ๋ฃ์ด์ ์๋์ผ๋ก ์๋ฒ์ ์ ์ก
์ฟ ํค์ ๊ตฌ์ฑ ์์
- ์ด๋ฆ(Name) : ๊ฐ๊ฐ์ ์ฟ ํค๋ฅผ ๊ตฌ๋ณํ๋ ๋ฐ ์ฌ์ฉ๋๋ ์ด๋ฆ
- ๊ฐ(Value) : ์ฟ ํค์ ์ด๋ฆ๊ณผ ๊ด๋ จ๋ ๊ฐ
- ์ ํจ์๊ฐ(Expires) : ์ฟ ํค์ ์ ์ง์๊ฐ
- ๋๋ฉ์ธ(Domain): ์ฟ ํค๋ฅผ ์ ์กํ ๋๋ฉ์ธ
- ๊ฒฝ๋ก(Path): ์ฟ ํค๋ฅผ ์ ์กํ ์์ฒญ ๊ฒฝ๋ก
์ฟ ํค์ ๋์ ๋ฐฉ์
- ํด๋ผ์ด์ธํธ๊ฐ ํ์ด์ง๋ฅผ ์์ฒญ
- ์๋ฒ์์ ์ฟ ํค๋ฅผ ์์ฑ
- HTTP ํค๋์ ์ฟ ํค๋ฅผ ํฌํจ ์์ผ ์๋ต
- ๋ธ๋ผ์ฐ์ ๊ฐ ์ข ๋ฃ๋์ด๋ ์ฟ ํค ๋ง๋ฃ ๊ธฐ๊ฐ์ด ์๋ค๋ฉด ํด๋ผ์ด์ธํธ์์ ๋ณด๊ดํ๊ณ ์์
- ๊ฐ์ ์์ฒญ์ ํ ๊ฒฝ์ฐ HTTP ํค๋์ ์ฟ ํค๋ฅผ ํจ๊ป ๋ณด๋
- ์๋ฒ์์ ์ฟ ํค๋ฅผ ์ฝ์ด ์ด์ ์ํ ์ ๋ณด๋ฅผ ๋ณ๊ฒฝ ํ ํ์๊ฐ ์์ ๋ ์ฟ ํค๋ฅผ ์ ๋ฐ์ดํธ ํ์ฌ ๋ณ๊ฒฝ๋ ์ฟ ํค๋ฅผ HTTP ํค๋์ ํฌํจ์์ผ ์๋ต

์ฟ ํค์ ์ฌ์ฉ ์
- ๋ฐฉ๋ฌธ ์ฌ์ดํธ์์ ๋ก๊ทธ์ธ ์, "์์ด๋์ ๋น๋ฐ๋ฒํธ๋ฅผ ์ ์ฅํ์๊ฒ ์ต๋๊น?"
- ์ผํ๋ชฐ์ ์ฅ๋ฐ๊ตฌ๋ ๊ธฐ๋ฅ
- ์๋๋ก๊ทธ์ธ, ํ์ ์์ "์ค๋ ๋ ์ด์ ์ด ์ฐฝ์ ๋ณด์ง ์์" ์ฒดํฌ, ์ผํ๋ชฐ์ ์ฅ๋ฐ๊ตฌ๋
์ฟ ํค๋ ๋ง๋ฃ ๊ธฐํ์ด ์๋ ํค-๊ฐ ์ ์ฅ์์ ๋๋ค.
์๋ฒ๋ ์์ฒญ ์์ฒด๋ง์ผ๋ก๋ ๊ทธ ์์ฒญ์ด ๋๊ตฌ์๊ฒ์ ์ค๋ ์ง ์ ์ ์๊ธฐ์, ์๋ต์ ๋ณด๋ผ ์ ์์. ์ด ๋ ์ฟ ํค์ ๋์ ๋ํ ์ ๋ณด๋ฅผ ๋ด์์ ์๋ฒ๋ก ๋ณด๋ด๋ฉด ์๋ฒ๋ ์ฟ ํค๋ฅผ ์ฝ์ด์ ๋ด๊ฐ ๋๊ตฐ์ง ํ์ . ์ฟ ํค๋ ์ฒ์๋ถํฐ ์๋ฒ์ ํด๋ผ์ด์ธํธ ๊ฐ์ ์ง์์ ์ธ ๋ฐ์ดํฐ ๊ตํ์ ์ํด ๋ง๋ค์ด์ก๊ธฐ ๋๋ฌธ์ ์๋ฒ๋ก ๊ณ์ ์ ์ก๋จ.
localStorage.setItem('name', 'lotty');
localStorage.setItem('birth', 1990);
localStorage.getItem('name'); // lotty
localStorage.getItem('birth'); // 1990 (๋ฌธ์์ด)
localStorage.removeItem('birth');
localStorage.getItem('birth'); // null (์ญ์ ๋จ)
localStorage.clear(); // ์ ์ฒด ์ญ์
HTTP ํ๋กํ ์ฝ ํ๊ฒฝ์์ ์๋ฒ๋ ํด๋ผ์ด์ธํธ๊ฐ ๋๊ตฌ์ธ์ง ํ์ธํด์ผํจ.
๊ทธ ์ด์ ๋ HTTP ํ๋กํ ์ฝ์ด connectionless, statelessํ ํน์ฑ์ด ์๊ธฐ ๋๋ฌธ.
* ํด๋ผ์ด์ธํธ๊ฐ ์์ฒญ์ ํ ํ ์๋ต์ ๋ฐ์ผ๋ฉด ๊ทธ ์ฐ๊ฒฐ์ ๋์ด ๋ฒ๋ฆฌ๋ ํน์ง
* ์ฐ๊ฒฐ์ ๋๋ ์๊ฐ ํด๋ผ์ด์ธํธ์ ์๋ฒ์ ํต์ ์ด ๋๋๋ฉฐ ์ํ ์ ๋ณด๋ ์ ์งํ์ง ์๋ ํน์ฑ์ด ์์.
์ด ๋ ์ฟ ํค์ ๋์ ๋ํ ์ ๋ณด๋ฅผ ๋ด์์ ์๋ฒ๋ก ๋ณด๋ด๋ฉด ์๋ฒ๋ ์ฟ ํค๋ฅผ ์ฝ์ด์ ๋ด๊ฐ ๋๊ตฐ์ง ํ์ . ์ฟ ํค๋ ์ฒ์๋ถํฐ ์๋ฒ์ ํด๋ผ์ด์ธํธ ๊ฐ์ ์ง์์ ์ธ ๋ฐ์ดํฐ ๊ตํ์ ์ํด ๋ง๋ค์ด์ก๊ธฐ ๋๋ฌธ์ ์๋ฒ๋ก ๊ณ์ ์ ์ก๋จ.
์ด๊ฒ ๋ฌธ์ ๊ฐ ๋จ. ๋ง์ฝ 4kb ์ฉ๋ ์ ํ์ ๊ฑฐ์ ๋ค ์ฑ์ด ์ฟ ํค๊ฐ ์๋ค๋ฉด, ์์ฒญ์ ํ ๋๋ง๋ค ๊ธฐ๋ณธ 4kb์ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํด์ผํจ. 4kb ์ค์๋ ์๋ฒ์ ํ์ํ์ง ์์ ๋ฐ์ดํฐ๋ค๋ ์์ -> ๋ฐ์ดํฐ ๋ญ๋น
๋ฐ๋ก ๊ทธ๋ฐ ๋ฐ์ดํฐ๋ค์ ์ด์ ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ์ธ์ ์คํ ๋ฆฌ์ง์ ์ ์ฅ!!
์ด ๋ ์ ์ฅ์์ ๋ฐ์ดํฐ๋ ์๋ฒ๋ก ์๋ ์ ์ก๋์ง ์์.
๋ ์คํ ๋ฆฌ์ง๋ ๋ชจ๋ window ๊ฐ์ฒด ์์ ๋ค์ด ์์. Storage๊ฐ์ฒด๋ฅผ ์์๋ฐ๊ธฐ ๋๋ฌธ์ ๋ฉ์๋๊ฐ ๊ณตํต์ ์ผ๋ก ์กด์ฌ.
๋๋ฉ์ธ ๋ณ์ฉ๋ ์ ํ๋ ์์(ํ๋กํ ์ฝ, ํธ์คํธ, ํฌํธ๊ฐ ๊ฐ์ผ๋ฉด ๊ฐ์ ์คํ ๋ฆฌ์ง๋ฅผ ๊ณต์ )
๋ชจ๋ฐ์ผ์ 2.5mb, ๋ฐ์คํฌํ์ 5mb~10mb๋ผ๊ณ ์๊ฐํ์๋ฉด ๋จ.
์ด๊ฒ ๋ถ์กฑํ๋ค๋ฉด 50mb๋ฅผ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ฅํ ์ ์๋IndexedDB๋ฅผ ์.
๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ์ธ์ ์คํ ๋ฆฌ์ง
๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ์ธ์
์คํ ๋ฆฌ์ง๋ HTML5์์ ์ถ๊ฐ๋ ์ ์ฅ์.
๊ฐ๋จํ ํค์ ๊ฐ์ ์ ์ฅํ ์ ์์ต๋๋ค. ํค-๋ฐธ๋ฅ ์คํ ๋ฆฌ์ง์ ํํ
๋ก์ปฌ ์คํ ๋ฆฌ์ง | ์ธ์ ์คํ ๋ฆฌ์ง | |
๋ฐ์ดํฐ ์๊ตฌ | O (์ฌ์ฉ์๊ฐ ์ง์ฐ์ง ์๋ ํ) | X (์๋์ฐ, ํญ ๋ซ์์ ๋ด์ฉ ์ ๊ฑฐ) |
์ฌ์ฉ๋ฐฉ๋ฒ | ์๋ ๋ก๊ทธ์ธ | ์ผํ์ฑ ๋ก๊ทธ์ธ |
์ฃผ์์ฌํญ | ๋น๋ฐ๋ฒํธ์ ๊ฐ์ ์ค์ ์ ๋ณด๋ ์ ๋ ์ ์ฅ X |
์ธ์ ( Session )
์ธ์ ์ด๋?
- ์ธ์ ์ ์ฟ ํค๋ฅผ ๊ธฐ๋ฐํ๊ณ ์์ง๋ง, ์ฌ์ฉ์ ์ ๋ณด ํ์ผ์ ๋ธ๋ผ์ฐ์ ์ ์ ์ฅํ๋ ์ฟ ํค์ ๋ฌ๋ฆฌ ์ธ์ ์ ์๋ฒ ์ธก์์ ๊ด๋ฆฌ
- ์๋ฒ์์๋ ํด๋ผ์ด์ธํธ๋ฅผ ๊ตฌ๋ถํ๊ธฐ ์ํด ์ธ์ ID๋ฅผ ๋ถ์ฌํ๋ฉฐ ์น ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ์ ์ ์ํด์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ข ๋ฃํ ๋๊น์ง ์ธ์ฆ์ํ๋ฅผ ์ ์ง
- ๋ฌผ๋ก ์ ์ ์๊ฐ์ ์ ํ์ ๋์ด ์ผ์ ์๊ฐ ์๋ต์ด ์๋ค๋ฉด ์ ๋ณด๊ฐ ์ ์ง๋์ง ์๊ฒ ์ค์ ์ด ๊ฐ๋ฅ
- ์ฌ์ฉ์์ ๋ํ ์ ๋ณด๋ฅผ ์๋ฒ์ ๋๊ธฐ ๋๋ฌธ์ ์ฟ ํค๋ณด๋ค ๋ณด์์ ์ข์ง๋ง, ์ฌ์ฉ์๊ฐ ๋ง์์ง์๋ก ์๋ฒ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ๋ง์ด ์ฐจ์งํ๊ฒ ๋จ.
- ์ฆ ๋์ ์ ์๊ฐ ๋ง์ ์น ์ฌ์ดํธ์ธ ๊ฒฝ์ฐ ์๋ฒ์ ๊ณผ๋ถํ๋ฅผ ์ฃผ๊ฒ ๋๋ฏ๋ก ์ฑ๋ฅ ์ ํ์ ์์ธ์ด ๋จ.
- ํด๋ผ์ด์ธํธ๊ฐ Request๋ฅผ ๋ณด๋ด๋ฉด, ํด๋น ์๋ฒ์ ์์ง์ด ํด๋ผ์ด์ธํธ์๊ฒ ์ ์ผํ ID๋ฅผ ๋ถ์ฌํ๋ ๋ฐ ์ด๊ฒ์ด ์ธ์ ID.
์ธ์ ์ ๋์ ๋ฐฉ์
- ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ์ ์ ์ ์ ์ธ์ ID๋ฅผ ๋ฐ๊ธ.
- ํด๋ผ์ด์ธํธ๋ ์ธ์ ID์ ๋ํด ์ฟ ํค๋ฅผ ์ฌ์ฉํด์ ์ ์ฅํ๊ณ ๊ฐ์ง๊ณ ์์
- ํด๋ผ๋ฆฌ์ธํธ๋ ์๋ฒ์ ์์ฒญํ ๋, ์ด ์ฟ ํค์ ์ธ์ ID๋ฅผ ์๋ฒ์ ์ ๋ฌํด์ ์ฌ์ฉ.
- ์๋ฒ๋ ์ธ์ ID๋ฅผ ์ ๋ฌ ๋ฐ์์ ๋ณ๋ค๋ฅธ ์์ ์์ด ์ธ์ ID๋ก ์ธ์ ์ ์๋ ํด๋ผ์ธํธ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ด.
- ํด๋ผ์ด์ธํธ ์ ๋ณด๋ฅผ ๊ฐ์ง๊ณ ์๋ฒ ์์ฒญ์ ์ฒ๋ฆฌํ์ฌ ํด๋ผ์ด์ธํธ์๊ฒ ์๋ต.
์ธ์ ์ ํน์ง
- ๊ฐ ํด๋ผ์ด์ธํธ์๊ฒ ๊ณ ์ ID๋ฅผ ๋ถ์ฌ
- ์ธ์ ID๋ก ํด๋ผ์ด์ธํธ๋ฅผ ๊ตฌ๋ถํด์ ํด๋ผ์ด์ธํธ์ ์๊ตฌ์ ๋ง๋ ์๋น์ค๋ฅผ ์ ๊ณต
- ๋ณด์ ๋ฉด์์ ์ฟ ํค๋ณด๋ค ์ฐ์
- ์ฌ์ฉ์๊ฐ ๋ง์์ง์๋ก ์๋ฒ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ๋ง์ด ์ฐจ์งํ๊ฒ ๋จ
์ธ์ ์ ์ฌ์ฉ ์
- ๋ก๊ทธ์ธ ๊ฐ์ด ๋ณด์์ ์ค์ํ ์์ ์ ์ํํ ๋ ์ฌ์ฉ
์ฐจ์ด์ ๋ฆฌ
[1] ์ฐจ์ด ์ ๋ฆฌ
1. ์ฟ ํค์ ๋จ์ ์ ๋ณด์ํด HTML5์์ '์น์คํ ๋ฆฌ์ง'๋ผ๋ ๊ธฐ์ ํ์.
1-1) ์น์คํ ๋ฆฌ์ง : ๋ก์ปฌ์คํ ๋ฆฌ์ง, ์ธ์ ์คํ ๋ฆฌ์ง.
1-2) ์น์คํ ๋ฆฌ์ง๋ Key์ Value ํํ๋ก ์ด๋ฃจ์ด์ง.
1-3) ์น์คํ ๋ฆฌ์ง๋ ํด๋ผ์ด์ธํธ์ ๋ํ ์ ๋ณด๋ฅผ ์ ์ฅ.
1-4) ์น์คํ ๋ฆฌ์ง๋ ๋ก์ปฌ์๋ง ์ ๋ณด๋ฅผ ์ ์ฅ, ์ฟ ํค๋ ์๋ฒ์ ๋ก์ปฌ์ ์ ๋ณด๋ฅผ ์ ์ฅ.
โ
2. ๋ก์ปฌ์คํ ๋ฆฌ์ง๋ ํด๋ผ์ด์ธํธ์ ๋ํ ์ ๋ณด๋ฅผ ์๊ตฌ์ ์ผ๋ก ์ ์ฅ ex) ์๋ ๋ก๊ทธ์ธ ์ ์ฅ
โ
3. ์ธ์ ์คํ ๋ฆฌ์ง๋ ์ธ์ ์ข ๋ฃ ์(๋ธ๋ผ์ฐ์ ๋ซ์ ๊ฒฝ์ฐ) ํด๋ผ์ด์ธํธ์ ๋ํ ์ ๋ณด ์ญ์ ex) ์ ๋ ฅ ํผ ์ ๋ณด ์ ์ฅ
3-1) ๋ก์ปฌ&์ธ์ ์คํ ๋ฆฌ์ง
์ฅ์ 1 : ์๋ฒ์ ๋ถํ์ํ๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ์ง ์๋๋ค.
3-2) ๋ก์ปฌ&์ธ์ ์คํ ๋ฆฌ์ง
์ฅ์ 2 : ์ฉ๋์ด ํฌ๋ค. (์ฝ 5Mb, ๋ธ๋ผ์ฐ์ ๋ง๋ค ์ฐจ์ด ์กด์ฌ)
3-3) ๋ก์ปฌ&์ธ์ ์คํ ๋ฆฌ์ง ๋จ์ : HTML5๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ์ ๊ฒฝ์ฐ ์ฌ์ฉ ๋ถ๊ฐ
โ
4. ์ฟ ํค๋ ๋ง๋ฃ ๊ธฐํ์ด ์๋ Key, Value ํํ์ ์ ์ฅ์
4-1) ์ฟ ํค ์ฅ์ : ๋๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ง์
4-2) ์ฟ ํค ๋จ์ 1 : ๋งค HTTP์์ฒญ๋ง๋ค ํฌํจ๋์ด apiํธ์ถ๋ก ์๋ฒ์ ๋ถ๋ด.
4-3) ์ฟ ํค ๋จ์ 2 : ์ฟ ํค์ ์ฉ๋์ด ์์ (์ฝ 4Kb)
4-4) ์ฟ ํค ๋จ์ 3 : ์ํธํ ์กด์ฌ x -> ์ฌ์ฉ์ ์ ๋ณด ๋๋ ์ํ
โ
โ
โ
[2] ๊ฐ ์ - ์ด๋ค ์ ํ์ ๋ฐ์ดํฐ๋ฅผ ์ด๋์ ์ ์ฅํ๋ฉด ์ข์๊น?
โ
- ์๋ ๋ก๊ทธ์ธ -> ๋ก์ปฌ์คํ ๋ฆฌ์ง
- ์ ๋ ฅ ํผ ์ ๋ณด -> ์ธ์ ์คํ ๋ฆฌ์ง
- ๋น๋ก๊ทธ์ธ ์ฅ๋ฐ๊ตฌ๋ -> ์ธ์ ์คํ ๋ฆฌ์ง
- ๋ค์ ๋ณด์ง ์์ ํ์ ์ฐฝ -> ์ฟ ํค
IndexedDB
low-level API for client-side storage
์น ์ธํฐํ์ด์ค ์ค ํ๋๋ก ๋ก์ปฌ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ญํ
๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค
localStorage, sessionStorage์ ์ ์ฅํ๊ธฐ์๋ ๋ง์ ์์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ๋ ์ฃผ๋ก ์ฌ์ฉ
IndexedDB is a way for you to persistently store data inside a user's browser. Because it lets you create web applications with rich query abilities regardless of network availability, these applications can work both online and offline. IndexedDB is useful for applications that store a large amount of data (for example, a catalog of DVDs in a lending library) and applications that don't need persistent internet connectivity to work (for example, mail clients, to-do lists, and notepads).
IndexedDB lets you store and retrieve objects that are indexed with a "key." All changes that you make to the database happen within transactions. Like most web storage solutions, IndexedDB follows a same-origin policy. So while you can access stored data within a domain, you cannot access data across different domains.
If you have assumptions from working with other types of databases, you might get thrown off when working with IndexedDB. So the following key characteristics of IndexedDB are important to keep in mind:
- IndexedDB databases store key-value pairs. The values can be complex structured objects, and keys can be properties of those objects. You can create indexes that use any property of the objects for quick searching, as well as sorted enumeration. Keys can be binary objects.
- IndexedDB is built on a transactional database model. Everything you do in IndexedDB always happens in the context of a transaction. The IndexedDB API provides lots of objects that represent indexes, tables, cursors, and so on, but each of these is tied to a particular transaction. Thus, you cannot execute commands or open cursors outside of a transaction. Transactions have a well-defined lifetime, so attempting to use a transaction after it has completed throws exceptions. Also, transactions auto-commit and cannot be committed manually. This transaction model is really useful when you consider what might happen if a user opened two instances of your web app in two different tabs simultaneously. Without transactional operations, the two instances could interfere with each other's modifications. If you are not familiar with transactions in a database, read the Wikipedia article on transactions. Also see transaction under the Definitions section.
- The IndexedDB API is mostly asynchronous. The API doesn't give you data by returning values; instead, you have to pass a callback function. You don't "store" a value into the database, or "retrieve" a value out of the database through synchronous means. Instead, you "request" that a database operation happens. You get notified by a DOM event when the operation finishes, and the type of event you get lets you know if the operation succeeded or failed. This sounds a little complicated at first, but there are sanity measures baked in. It's not that different from the way that XMLHttpRequest works.
- IndexedDB uses a lot of requests. Requests are objects that receive the success or failure DOM events that were mentioned previously. They have onsuccess and onerror properties, and you can call addEventListener() and removeEventListener() on them. They also have readyState, result, and errorCode properties that tell you the status of the request. The result property is particularly magical, as it can be many different things, depending on how the request was generated (for example, an IDBCursor instance, or the key for a value that you just inserted into the database).
- IndexedDB uses DOM events to notify you when results are available. DOM events always have a type property (in IndexedDB, it is most commonly set to "success" or "error"). DOM events also have a target property that indicates where the event is headed. In most cases, the target of an event is the IDBRequest object that was generated as a result of doing some database operation. Success events don't bubble up and they can't be canceled. Error events, on the other hand, do bubble, and can be cancelled. This is quite important, as error events abort whatever transactions they're running in, unless they are cancelled.
- IndexedDB is object-oriented. IndexedDB is not a relational database with tables representing collections of rows and columns. This important and fundamental difference affects the way you design and build your applications. In a traditional relational data store, you would have a table that stores a collection of rows of data and columns of named types of data. IndexedDB, on the other hand, requires you to create an object store for a type of data and persist JavaScript objects to that store. Each object store can have a collection of indexes that makes it efficient to query and iterate across. If you are not familiar with object-oriented database management systems, read the Wikipedia article on object database.
- IndexedDB does not use Structured Query Language (SQL). It uses queries on an index that produces a cursor, which you use to iterate across the result set. If you are not familiar with NoSQL systems, read the Wikipedia article on NoSQL.
- IndexedDB adheres to a same-origin policy. An origin is the domain, application layer protocol, and port of a URL of the document where the script is being executed. Each origin has its own associated set of databases. Every database has a name that identifies it within an origin. The security boundary imposed on IndexedDB prevents applications from accessing data with a different origin. For example, while an app or a page in http://www.example.com/app/ can retrieve data from http://www.example.com/dir/, because they have the same origin, it cannot retrieve data from http://www.example.com:8080/dir/ (different port) or https://www.example.com/dir/ (different protocol), because they have different origins.
IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:
- Internationalized sorting. Not all languages sort strings in the same way, so internationalized sorting is not supported. While the database can't store data in a specific internationalized order, you can sort the data that you've read out of the database yourself. Note, however, that locale-aware sorting has been allowed with an experimental flag enabled (currently for Firefox only) since Firefox 43.
- Synchronizing. The API is not designed to take care of synchronizing with a server-side database. You have to write code that synchronizes a client-side indexedDB database with a server-side database.
- Full text searching. The API does not have an equivalent of the LIKE operator in SQL.
In addition, be aware that browsers can wipe out the database, such as in the following conditions:
- The user requests a wipe out. Many browsers have settings that let users wipe all data stored for a given website, including cookies, bookmarks, stored passwords, and IndexedDB data.
- The browser is in private browsing mode. Some browsers, have "private browsing" (Firefox) or "incognito" (Chrome) modes. At the end of the session, the browser wipes out the database.
- The disk or quota limit has been reached.
- The data is corrupt.
- An incompatible change is made to the feature.
The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.
IndexedDB ์ฌ์ฉํ๊ธฐ
IndexedDB๋ ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ์ ๋ฐ์ดํฐ๋ฅผ ์๊ตฌ์ ์ผ๋ก ์ ์ฅํ ์ ์๋ ๋ฐฉ๋ฒ ์ค ํ๋์ ๋๋ค. IndexedDB๋ฅผ ์ฌ์ฉํ์ฌ ๋คํธ์ํฌ ์ํ์ ์๊ด์์ด ํ๋ถํ ์ฟผ๋ฆฌ ๊ธฐ๋ฅ์ ์ด์ฉํ ์ ์๋ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๊ธฐ ๋๋ฌธ์, ์ฌ๋ฌ๋ถ์ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ์จ๋ผ์ธ๊ณผ ์คํ๋ผ์ธ ํ๊ฒฝ์์ ๋ชจ๋ ๋์ํ ์ ์์ต๋๋ค.
Sources
https://www.geeksforgeeks.org/difference-between-local-storage-session-storage-and-cookies/
Difference Between Local Storage, Session Storage And Cookies - GeeksforGeeks
A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
www.geeksforgeeks.org
์ฟ ํค์ ์ธ์ ๊ทธ๋ฆฌ๊ณ ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ์ธ์ ์คํ ๋ฆฌ์ง
์ฟ ํค ์ฟ ํค๋ ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ ) ๋ก์ปฌ์ ์ ์ฅ๋๋ ํค์ ๊ฐ์ด ๋ค์ด์๋ ์์ ๋ฐ์ดํฐ ํ์ผ. document.cookieํ๋ฉด ํ์ฌ ์ฟ ํค ์ ๋ณด๊ฐ ๋์ด. ์ฌ์ฉ์ ์ธ์ฆ์ด ์ ํจํ ์๊ฐ์ ๋ช ์ํ ์ ์์ผ๋ฉฐ, ์ ํจ ์๊ฐ
racoonlotty.tistory.com
https://lcs1245.tistory.com/entry/IndexedDB-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%A0%95%EB%A6%AC
IndexedDB ์ฌ์ฉ๋ฒ ์ ๋ฆฌ
IndexedDB ์ฌ์ฉ๋ฒ์ ๊ฐ๋จํ ์ ๋ฆฌํ์ฌ ํฌ์คํ ํ๋ ค ํฉ๋๋ค. ๊ธฐ๋ณธ์ ์ธ CRUD๋ถ๋ถ์ ๋ํ ๋ด์ฉ์ ๋๋ค. IndexedDB๋ ์น ์ธํฐํ์ด์ค ์ค ํ๋๋ก ๋ก์ปฌ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ญํ ์ ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ ๋ฐ์ด
lcs1245.tistory.com
https://www.youtube.com/watch?v=-AzFQN9Vp7k&ab_channel=BorderlessEngineer
'JavaScript - The Complete Guide 2022' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Section 24: Time to Practice! - Let's build a Webpage (0) | 2022.11.07 |
---|---|
Section 23: Browser Support - Ensure Your Scripts Work In All Browsers (0) | 2022.11.04 |
Section 21: JavaScript Tooling - Beyond Basic Projects (0) | 2022.11.04 |
Section 20: JavaScript Modules - Writing Modular (=Multi-File) Code (0) | 2022.11.03 |
Section 19: Third-Party Libraries - Don't Re-Invent The Wheel! (0) | 2022.11.03 |