🧩 Plasmo Developers•17mo ago

Local Storage Item does not show up in service worker dev tools ?

I am saving simple key value string (id: "123") in my background script which I'm able to read it (and can console) every time but it doesn't appear on service workers Application/Local Storage I'm not sure if it's expected behaviour or not. I have checked host websites Local storage as well it doesn't show up there as well. Interesting part is that plasmo can read it magically from somewhere

10 Replies

suchcodemuchwowOP•17mo ago

This is the background script I have:

async function reviveUser() {
  const storage = new Storage({
    area: "local",
  })


  let userId = await storage.get("user-id")

  if (!userId) {
    userId = nanoid()
    await storage.set("user-id", userId)

    // createUser({ userId })
  }

  return userId
}

async function reviveUser() {
  const storage = new Storage({
    area: "local",
  })


  let userId = await storage.get("user-id")

  if (!userId) {
    userId = nanoid()
    await storage.set("user-id", userId)

    // createUser({ userId })
  }

  return userId
}

lab•17mo ago

yup, there're 2 types of storage: WebAPI localStorage, and chrome extension Storage API (which has a "local" area, completely unrelated to web localStorage) the storage tab does not show you chrome storage at all (even when openning inspector for ext). There's some inspector helper function in the storage module (under storage/utils or storage/inspector) that you can use to monitor change to your storage

suchcodemuchwowOP•17mo ago

Ohh thanks a lot ❤️ I was going to update here because I figured that out just now ❤️ If you don't mind me asking, I am experiencing something pretty weird:

  const [userId] = useStorage<string>("user-id", (storedId) =>
    typeof storedId === "undefined" ? nanoid() : storedId
  )

  console.log("App mounted", { userId })

  useEffect(() => {
    console.log(userId)
  }, [])

  const [userId] = useStorage<string>("user-id", (storedId) =>
    typeof storedId === "undefined" ? nanoid() : storedId
  )

  console.log("App mounted", { userId })

  useEffect(() => {
    console.log(userId)
  }, [])

Which logs this out:

App mounted {userId: 'Z3ltFdYKVwk6BGzDt5JTC'} app.tsx:36 
Z3ltFdYKVwk6BGzDt5JTC                         app.tsx:32 
App mounted {userId: 'n-EiDTOsDuClJTLKBwAO-'} app.tsx:36

App mounted {userId: 'Z3ltFdYKVwk6BGzDt5JTC'} app.tsx:36 
Z3ltFdYKVwk6BGzDt5JTC                         app.tsx:32 
App mounted {userId: 'n-EiDTOsDuClJTLKBwAO-'} app.tsx:36

I guess there is some type of race condition happening here because first logged value "Z3ltFdYKVwk6BGzDt5JTC" is changing every time I refresh the page but second value is coming from actual store. Do you have some suggestion to prevent this behaviour ? My usecase is: I want to generate random id when user opens the extension then use that lifespan of the extension basically. I'm new to the discord not sure if you have seen my reply @louisgv sorry if I'm disturbing 😅

lab•17mo ago

You're good :) This is a react-runtime thing, there's a 2nd params to that callback called isRehydraded that you can use to check if it was rehydrated or not The paradigm is very similar to PWA app rehydrating from local store that also hold an in-memory initial state - it's a bit complex at the rehydration stage bc it's async

console.log("App mounted", { userId })

Basically you should check if it's rehydrated AND undefined, then issue new ID, otherwise issue an emptry string or so

suchcodemuchwowOP•17mo ago

You mean useStorage( first, second) right ? I couldn't find any other example or docs about it do you know any that you can redirect me ?

Arcane•17mo ago

@batu.xd has reached level 2. GG!

lab•17mo ago

the flows of the state is roughly like this: undefined && not-hydrated -> undefined && rehydrated OR hydrated with stored value So the first render you saw is likely when it was undefined initially and issued a new ID. like this:

  const [userId] = useStorage<string>("user-id", (storedId, isHydrated) =>
    typeof storedId === "undefined" ? nanoid() : storedId
  )

  const [userId] = useStorage<string>("user-id", (storedId, isHydrated) =>
    typeof storedId === "undefined" ? nanoid() : storedId
  )

suchcodemuchwowOP•17mo ago

Ohhh I see Ohhh thanks a lot Now it's clear I can open a pr for docs I haven't found any info about this in docs or even in examples

lab•17mo ago

I recall I had something in the examples but... maybe that was in a dream lol Yes please! yeah I might have dreamed about it and forgot to log down the tick to document this feat xD...

suchcodemuchwowOP•17mo ago

🫡 🤗 Thanks a lot

Gaming

Programming

Local Storage Item does not show up in service worker dev tools ?