As a front-end engineer, web application storage’s mechanism is not a stranger to us, but in daily operations, it’s not that frequently being called. In this article, we are going to cover Cookies, Local Storage, Session Storages, clarify their definitions and explore how to call them exactly.

作为一名前端工程师，Web应用程序存储的机制对我们来说并不陌生，但是在日常操作中，它并不是经常被调用的机制。 在本文中，我们将介绍Cookie，本地存储，会话存储，阐明它们的定义并探讨如何准确地调用它们。

定义 (Definitions)

One more thing to mention, Cookies support both HTML4 and HTML5, others only support HTML5. Practically, it’s not that important.

还有一件事要提到，Cookie同时支持HTML4和HTML5 ，其他仅支持HTML5 。 实际上，它并不那么重要。

怎么打电话 (How to Call)

饼干 (Cookies)

Cookies are put inside of document global object. Although it will be parsed as key-value style object, there’s no friendly API to read/write as an object. Developer need to manually write the string.

Cookies放在文档全局对象内部。 尽管它将被解析为键值样式对象，但没有友好的API可以作为对象进行读取/写入。 开发人员需要手动编写字符串。

会话存储和会话存储 (Session Storage & Session Storage)

Both support easy read/write interface, but like JSON, but both key and value have to be string.

两者都支持简单的读/写接口，但类似于JSON，但是键和值都必须是字符串。

如何调试 (How to Debug)

The easiest way is:

最简单的方法是：

1. Open browser(like Chrome)
   打开浏览器(如Chrome)
2. Open Developer Console
   打开开发者控制台
3. Click “Application” tab. On the right hand column, you will see the structured view for all the storage info inside browser
   单击“应用程序”选项卡。 在右侧列上，您将看到浏览器中所有存储信息的结构化视图