nextjs app router - browser data

[storm jewel]

is there a way from the nextjs app router app and UI to clear the user browser data (ie. indexeddb, cache, cookie, local)

[molten knoll]

Hi @storm jewel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Next.js provides several ways to manage and clear data stored in the browser, such as cookies. However, it does not directly provide methods to clear other types of browser data like IndexedDB, cache, or localStorage. These are typically managed using standard JavaScript APIs provided by the browser.

For cookies, you can use the cookies API in Next.js to get, set, and delete cookies. Here's an example of how to delete a cookie:

import { cookies } from 'next/headers'
 
export async function exampleAction() {
  // Delete cookie
  cookies().delete('name')
}

Source (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#cookies)

You can also delete cookies inside an API Route using the setHeader method on the response:

import type { NextApiRequest, NextApiResponse } from 'next'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.setHeader('Set-Cookie', 'username=; Path=/; HttpOnly; Max-Age=0')
  res.status(200).send('Cookie has been deleted.')
}

Source (https://nextjs.org/docs/pages/building-your-application/data-fetching/forms-and-mutations#deleting-cookies)

For other types of browser data like IndexedDB, cache, or localStorage, you would typically use the respective APIs provided by the browser. For example, to clear localStorage you can use localStorage.clear(), and to delete an IndexedDB database you can use indexedDB.deleteDatabase(databaseName). However, these operations are not specific to Next.js and should be used with caution as they can affect other parts of your application or other applications running on the same domain.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: