Inspetor de Armazenamento

O Inspetor de Armazenamento permite a você inspecionar diversos tipos de armazenamento que uma página na web pode usar. Atualmente ele pode ser usado para inspecionar os seguintes tipos de armazenamento:

• Cookies - Todos os cookies criados pela página ou quaisquer iframes dentro da página. Cookies criados como parte de uma resposta de chamada de rede também são listados, mas apenas para chamadas que aconteceram enquanto a ferramenta estava aberta.
• Local Storage - Todos os itens de armazenamentos locais criados pela página ou quaisquer iframes dentro da página.
• Session Storage - Todas os itens de armazenamento de sessão criados pela página ou quaisquer iframes dentro da página.
• IndexedDB - Todos os bancos de dados IndexedDB criados pela página ou quaisquer iframes dentro da página, seus Object Stores e os itens armazenados nestes Object Stores.

Pelo tempo presente, o Inspetor de Armazenamento fornece apenas uma visão read-only do armazenamento. Mas estamos trabalhando para permitir a você editar o conteúdo do armazenamento em futuros lançamentos.

Abrindo o Inspetor de Armazenamento

Uma vez habilitado, você poderá abrir o Inspetor de Armazenamento selecionando "Inspetor de Armazenamento" a partir do submenu do Desenvolvedor Web no Painel de Menu do Firefox (ou menu de Ferramentas se você exibir a barra de menu ou estiver no Mac OS X), or pressionando o atalho de teclado Shift + F9.

A  Caixa de Ferramentas vai aparecer na parte de baixo da janela do navegador, com o Inspetor de Armazenamento ativado. Ele é chamado apenas de "Armazenamento" na Caixa de Ferramentas do Desenvolvedor.

Interface de Usuário do Inspetor de Armazenamento

A UI do Inspetor de Armazenamento é dividida em três componentes principais:

• Storage tree
• Table Widget
• Sidebar

Storage tree

The storage tree lists all the storage types that the Storage Inspector can inspect. For each type, it has a list of all possible origins available. An origin is the domain or hostname for different storage types. For cookies, the protocol does not differentiate the origin. For indexedDB or local storage an origin is a combination of protocol + hostname. For example, "https://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.

While cookies, local storage and session storage items are directly associated to an origin, for indexedDB the hierarchy has more levels. All indexedDB items are associated with an object store which is then associated with a database, and finally a database is associated with an origin.

You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically. Clicking on the tree items will change the data in the table to its right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain in the tree, while clicking on an object store item will show all the IndexedDB items in that object store. Similarly, clicking on a database will list all the object stores in that database.

Table Widget

The table widget is the place where all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.

All the columns in a Table Widget are resizable and can be hidden via the context menu on the table headers until only two columns are visible.

Cookies

When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in the table. The table then has the following columns:

• Name - The name of the cookie
• Path - The path property of the cookie
• Domain - The domain of the cookie
• Expires On - The time when the cookie will expire. If the cookie is a session cookie, the value of this column will be "Session"
• Created On - When the cookie was created
• Last Accessed On - When the cookie was last read
• Value - The value of the cookie
• isDomain - Is this cookie a domain cookie: that is, the domain value starts with a "."
• isSecure - Is this cookie a secure cookie
• isHttpOnly - Is this cookie http only.

Local storage / Session storage

When an origin corresponding to local storage or session storage is selected, the table will list the name and value of all the items corresponding to local storage or session storage.

IndexedDB origin

When you select an origin inside the Indexed DB storage type in the storage tree, the table lists the details of all the databases present for that origin. Databases have the following details:

• Database Name - The name of the database
• Origin - Its origin
• Version - The database version
• Object Stores - Number of object stores in the database

IndexedDB Database

When an IndexedDB database is selected in the storage tree, details about all the object stores is listed in the table. Any object store has the following details:

• Object Store Name - The name of the object store
• Key - The keyPath property of the object store.
• Auto Increment - Whether auto increment is enabled
• Indexes - Array of indexes present in the object store as shown below

IndexedDB object store

When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.

Sidebar

When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.

The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example, a stringified JSON like '{"foo": "bar"}' is shown as the origin JSON {foo: "bar"}, a key separated value like 1~2~3~4 is shown like an array [1, 2, 3, 4]. Below are a few screenshots giving examples of different types of parsed values:

A stringified JSON being shown as the original JSON in the parsed value section of the sidebar

A string containing key-value pairs being shown as JSON in the parsed value section of the sidebar

A string containing key separated values being shown as an Array in the parsed value section of the sidebar