Motivation
Have you ever wondered where websites store all the data to personalize your experience, remember your preferences, or keep track of your shopping cart? The Application tab (Chrome and Microsoft Edge) or Storage tab (Safari and Firefox) in your browser's developer tools acts like a vault, letting you see how websites store and manage this information.
What is the Application Tab?
Imagine a website as a bustling marketplace. It remembers your previous purchases (cookies), keeps track of items in your cart (local storage), and even stores preferences for future visits (indexedDB). The Application tab helps you see behind the scenes, revealing how websites store and interact with this data.
Getting to the Console:
Open your browser and visit any website.
Right-click anywhere on the page and select ❝Inspect❞ or ❝Inspect Element❞ or hotkeys
Cmd + Option + I(macOS) orCtrl + Shift + I(Windows or Linux).This opens the developer tools. Look for a tab labelled ❝Application❞ or ❝Sources❞ and click on it.
Parts of the Application Tab:
Cookies: These are tiny pieces of data websites store on your computer to remember things like login information, preferences, and shopping cart contents. The Application tab lets you see what cookies a website uses and even edit them (though be cautious!).
Local Storage: Websites can store significantly more data than cookies using Local Storage. This data persists even after you close the browser tab or window. The Application tab lets you view and edit Local Storage data.
IndexedDB: Websites can store even more structured data using IndexedDB. This is useful for complex applications that require a lot of data storage. The Application tab lets you view and manage IndexedDB data.
How Can Testers Use the Application Tab?
Test data persistence: Imagine you're testing a shopping cart. You can use the Application tab to view and edit Local Storage or Cookies to understand how this feature behaves. This helps ensure the cart remembers items even when the user refreshes the page.
Debug data-related issues: If a website feature relies on stored data (like login information), the Application tab helps debug issues. You can examine cookies or Local Storage to see if the data is missing or corrupted, which might explain why the feature isn't working correctly.
Bonus Tip: Many browsers offer tutorials and guides for their developer tools. Explore them to learn more about specific storage mechanisms and how they affect website functionality.
For example, when a guest user adds the item ❝Pure Cotton Pokemon™ T-Shirt❞ to the cart, the Cookies section populates with a cart, cart_sig, and cart_ts in the browser's storage, indicating that the website uses browser cookies to store information about the items in your cart.
What do these cookies mean?
cart: This cookie likely stores the actual contents of the user's shopping cart, such as the IDs or details of the items added, along with their quantities.cart_sig: This cookie is often used as a security measure to ensure the cart data hasn't been tampered with. It contains a cryptographic signature generated based on the contents of the cart cookie.cart_ts: This cookie likely stores a timestamp indicating when the cart was last updated or accessed. It helps the website manage the freshness of the cart data and potentially implement features like session timeouts.
Hence, if we remove these cookies, we cannot progress over the checkout process and lose the items added because the website no longer has access to the cart data stored in the browser, which is why it appears empty when refreshing the page or proceeding through the checkout process.
With this information, we started understanding how the cart feature has been implemented on this website and can investigate it further. For instance, what would happen if we added items as an authenticated user?
If we create an account on the website and add items to the cart while logged in, the website may associate the cart data with the account if the data is sent to the server and stored in the website's database. This allows for a seamless shopping experience across sessions and devices.
However, if we're not logged in or the website doesn't tie the cart data to users' accounts, the cart information is typically stored locally in the browser; it is not linked to any specific user account. In this case, the cart data is temporary and will be lost if we clear the browser's cookies or switch to a different browser or device. This is also why, sometimes, an item remains in the cart after logging out of an account.
In summary, this website uses browser cookies to temporarily store users' cart data, providing a convenient way to remember shopping selections during the browsing session. Whether cart data is linked to a user account depends on the website's design and functionality, and it is up to us to investigate further; the easiest way to test data persistent in this scenario is to log in to the same account in another browser and see what happens to the cart.