access the browser localStorage from leptos

[qknight]

Is there a way to access the browser localStorage from leptos?

https://blog.logrocket.com/localstorage-javascript-complete-guide/

[gbj]

Here are some good options:

1. use_local_storage from the leptos-use library
2. gloo_storage from gloo, which offers a variety of Rust-friendly wrappers for web APIs
3. Using the web-sys Local Storage directly as in the todomvc example in this repo

   leptos/examples/todomvc/src/lib.rs

   Lines 12 to 23 in 11f6a5d

   	pub fn new() -> Self {
   	let starting_todos =
   	window()
   	.local_storage()
   	.ok()
   	.flatten()
   	.and_then(|storage| {
   	storage.get_item(STORAGE_KEY).ok().flatten().and_then(
   	|value| serde_json::from_str::<Vec<Todo>>(&value).ok(),
   	)
   	})
   	.unwrap_or_default();

[dominikwilkowski]

What about https://docs.rs/leptos/latest/leptos/prelude/struct.LocalStorage.html? It's in the prelude so I would assume this is now included in Leptos?

[gbj]

@dominikwilkowski That is not related to the browser's concept of LocalStorage; rather it refers to one method for how arena-allocated items like signals can be stored, namely in thread-local storage. The answer given above and the three options included remain the correct answer.

[dominikwilkowski]

I got you. Thank you. I went with gloo_storage. I was confused there for a sec with the naming.

[rafiyq]

how to specify to only read localstorage in the client side not in the ssr?

[dominikwilkowski]

I found this bit helpful: https://book.leptos.dev/ssr/24_hydration_bugs.html?highlight=localSto#not-all-client-code-can-run-on-the-server