How to edit Local Storage data using browser Devtools

Local storage is a web browser feature that allows websites to store data on the user's computer in a key-to-value format.

To control and edit local storage access the developer tools using F12 key or right-click -> inspect and select the Application tab:

screencapture of devtools local storage editor GUI

Here the value can be changed to any other string value that is under 5MB in size.

Note that all local storage values are stored as strings though can be any object like JSON or number as local storage is handled by Javascript.

In this example, the web-scraping.dev/product/1 page is tracking the shopping cart state using local storage and JSON. Every "add to cart" button click updates the local storage JSON dataset with product id and quantity:

0:00
/
Each button click updates local storage.

So, we have full control of the shopping cart just by manipulating this value.

Question tagged: Tools

Related Posts

How to Use Tor For Web Scraping

In this article, we'll explain web scraping using Tor. For this, we'll use Tor as a proxy server to change the IP address randomly in either HTTP or SOCKS, as well as using it as a rotating proxy server.

How to Know What Anti-Bot Service a Website is Using?

In this article we'll take a look at two popular tools: WhatWaf and Wafw00f which can identify what WAF service is used.

Selenium Wire Tutorial: Intercept Background Requests

In this guide, we'll explore web scraping with Selenium Wire. We'll define what it is, how to install it, and how to use it to inspect and manipulate background requests.