How to work with local storage and session storage in puppeteer

Working with storage in Puppeteer typically involves interacting with the browser's localStorage or sessionStorage, which are part of the browser's web storage APIs. Puppeteer allows you to manipulate these storage mechanisms programmatically through the page.evaluate function. Here’s how you can work with localStorage in Puppeteer:

Working with localStorage

1. Setting Values in localStorage:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate to a website
  await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });

  // Set a value in localStorage
  await page.evaluate(() => {
    localStorage.setItem('myKey', 'myValue');
  });

  // Your Puppeteer script continues here

  await browser.close();
})();

2. Getting Values from localStorage:

// Get a value from localStorage
const value = await page.evaluate(() => {
  return localStorage.getItem('myKey');
});
console.log('Value from localStorage:', value); // Outputs: myValue

3. Clearing localStorage:

// Clear localStorage
await page.evaluate(() => {
  localStorage.clear();
});

Working with sessionStorage

Working with sessionStorage is similar to localStorage, except that data stored in sessionStorage is cleared when the page session ends (when the page is closed or refreshed).

1. Setting Values in sessionStorage:

// Set a value in sessionStorage
await page.evaluate(() => {
  sessionStorage.setItem('sessionKey', 'sessionValue');
});

2. Getting Values from sessionStorage:

// Get a value from sessionStorage
const sessionValue = await page.evaluate(() => {
  return sessionStorage.getItem('sessionKey');
});
console.log('Value from sessionStorage:', sessionValue); // Outputs: sessionValue

3. Clearing sessionStorage:

// Clear sessionStorage
await page.evaluate(() => {
  sessionStorage.clear();
});