2

I have a React application that allows users to select their "Favorite" items from a master/detail view...

I want the user to be able to open up the website, select their "Favorites" without having to sign in, reload the page, and have their Favorites saved "on the website." I've tried using PHP cookies from another origin (read here: You can't set Cookies from a fetch request). I don't want to include another npm package (mostly because I just want to know what's really going on behind my dependencies), and the only solution I can come up with is to use

window.localStorage.setItem('key', 'value');

Am I right? Is there some other convention for this? What should I do?

Keep in mind: I'm running this on a Node.js server so I can't just set the cookies with a PHP request.

ihodonald
  • 745
  • 1
  • 12
  • 27
  • 2
    React is a library to build ui components. using local storage is not part of it, so you can use it as is part of the specs in web. Anyway, you might want to separate the access of the localStorage in a separated file, that can be imported and tested - a level of indirection – Gonzalo.- May 05 '18 at 00:00
  • @Gonzalo.- Thank you! That makes it a little easier to understand. In my mind, I beg for the answer to the question as to whether or not there is another way to "save" things to the browser so that they are "still there" after a page refresh other than `window.localStorage` without using PHP. – ihodonald May 05 '18 at 00:05
  • 1
    you can use window.localStorage, or sessionstorage. There are also other implementations of more advanced features, like web sql, indexedDb, and so on. Not all of them are standard, and some have been deprecated. Having said that, all of them are unrelated to the problem that react tries to solve. You should be fine with using localStorage – Gonzalo.- May 05 '18 at 00:06
  • @Gonzalo.- Thank you! – ihodonald May 05 '18 at 00:07

3 Answers3

1

What makes you think you can't set cookies from a fetch request? Looking at your other question, it looks like you simply forgot to include credentials:

fetch('/whatever', {
    method: "GET",
    credentials: 'include'
})

But, yes, you can use window.localStorage or window.sessionStorage to save things locally.

dave
  • 62,300
  • 5
  • 72
  • 93
  • I will go back and try this another time. I was having some problems with CORS when I asked that question. I believe it's possible, I just don't know what the best practice is there. Is the fetch request setting the Cookies on the user's local browser? Do I need to check the session_id every time I save something to the PHP session? It was just a little confusing to me. I even had a problem setting the `content-type` within my `fetch` request on my production server because an OPTIONS request was being made that took 14 seconds before I got a response (TTFB). – ihodonald May 05 '18 at 00:13
1

Just so it is stated in an answer

React is a library to build ui components. Using local storage is not part of that objective, so you can use it, as is part of the specs in web (as well as sessionStorage. Anyway, you might want to separate the access of the localStorage in a separated file, that can be imported and tested - that means, a level of indirection

Gonzalo.-
  • 12,512
  • 5
  • 50
  • 82
  • I found this article very useful [https://www.robinwieruch.de/local-storage-react] It is very well explained and there is no need to install extra packages. It is also really useful to beginners to understand React logic. And, YES, you can use `localStorage`. Here you find a GitHub repository too https://github.com/the-road-to-learn-react/react-local-storage – A. D'Alfonso Jul 14 '20 at 15:32
1

you can use store.js exposes a simple API for cross-browser local storage

// Store current user
store.set('user', { name:'Marcus' })

// Get current user
store.get('user')

// Remove current user
store.remove('user')

// Clear all keys
store.clearAll()

// Loop over all stored values
store.each(function(value, key) {
    console.log(key, '==', value)
})
  • Installation:

npm install store --save

Example store.js usage with npm

var store = require('store')
store.set('user', { name:'Marcus' })
store.get('user').name == 'Marcus'