How to send data from localstorage to LiveView on initial load

Hi elixir community, I need your help once again.

TLDR, actual questions

  • Is it a good idea to use LiveView for an app, that has to save some data in localstorage and later use it

  • If yes, is it a good idea, to send saved data from client to server, because it is LiveView who is responsible for all rendering and client data will be kind of rehydration of the state, to properly render saved/seen items?

  • If yes, how can i send that initial data, retrieved from local storage?

A bit of context

I’ve been learning elixir in last few weeks, and started working on a side project. I’m using phoenix for backend and I have things taped and glued together (meaning probably it is not following best practices, improving that is next step, first i want to have this thing up and running) that it is working, and now I need to work on client side.

App I am trying to build is quite simple, with few features that are complicating things for me.

  • App shows a list of small posts (imagine something like entry in this forum, where post in my app would be each comment)

  • List is quite big (can go up to 1000 items)

  • no user registration, needs to work with localstorage/cookies for saving some data

features:

  • :heavy_check_mark: display initial set of items (10-20 items)

  • :heavy_check_mark: load more items on button press

  • save/unsave any post (store in localstorage, so that when user comes back later, this info is still saved)

  • mark items that user scrolled over as seen (basically, what passes the viewport is marked as seen)

  • switch between different views (all, only_new, saved)

Initially, when just starting, I was thinking to make client part as SPA with react or vue, but during the course decided to give LiveView a try. Now, I’ve been struggling whole day, trying to figure out, how to work with localstorage data.

For now, I am focusing only on save/unsave functionality, and having trouble there. I am able to save posts in localstorage, thanks to JS Hooks provided by LiveView. But, I need to pass this information to the server, so that LiveView renders buttons properly (so that i can show on a post, that it’s a saved post). Also, that data will be needed later, when I will want to implement show only saved items view. I thought, I could send this data during inital load of an app, sort of rehydration of the server, together with _csrf_token (most probably, I shouldn’t have sent that data together with _csrf_token, because that’s initalization of the socket, but it says param, so i tried =) )


let liveSocket = new LiveSocket('/live', Socket, {

params: {

_csrf_token: csrfToken,

saved: Object.keys(getFromLocalstorage('saved', {})),

},

hooks: hooks,

});

But I couldn’t figure out, how to retrieve that data. I can see from logs, that it is sent


[info] CONNECTED TO Phoenix.LiveView.Socket in 148µs

Transport: :websocket

Serializer: Phoenix.Socket.V2.JSONSerializer

Parameters: %{"_csrf_token" => "******", "saved" => %{"0" => "22465478", "1" => "22465479", "2" => "22465480", "3" => "22465486"}, "vsn" => "2.0.0"}

At this point, I have few questions

  1. Is this right use case for LiveView? (that’s why i described feature set instead of just going for the question)

  2. If yes, is it a good idea, to send saved data from client to server, because it is LiveView who is responsible for all rendering and client data will be kind of rehydration of the state, to properly render saved/seen items?

  3. If yes, how can i send that initial data, retrieved from local storage?

2 Likes

get_connect_params/1 is what you’re looking for :slight_smile:

8 Likes

that’s perfect, thanks!