Tips for updating the current user's username value in local storage in Angular

Question

Tips for updating the current user's username value in local storage in Angular

https://i.stack.imgur.com/ZA32X.png

https://i.stack.imgur.com/iDHZW.png

I am facing an issue with updating the local storage of a current User for only username. When I update the username, it's not reflecting in local storage. Even though I can see the change in the component page console, I am getting a null value for the item. In the console application, local storage shows "null" as the stored key and the value is {username: gasd}, but it's not being added to that JSON object. This is using Angular 6.

  let item = localStorage.getItem(this.currentUser);
  console.log(item);
  let myobj = {username: changeValue};
  localStorage.setItem(item, JSON.stringify(myobj));

html css angular6 typescript2.0

Answer 1

Answer №1

Consider localStorage as a key-value map.
You utilize string keys to access/modify string values. (learn more in MDN documentation)
For objects, the process is like this:

let myObj = {};
my["myKey"] = "myVal"; // keep in mind that non-string values are accepted for objects
my["myKey2"] = 2;
my["myKey3"] = {};

However, localStorage requires strings on both ends:

localStorage.setItem("currentUser", {username: "ganes"}); // AVOID
localStorage.setItem({username: "ganes"}, "someValue"); // AVOID
localStorage.getItem({username: "ganes"}) // AVOID

let currentUserDataStr = localStorage.getItem("currentUser"); // CORRECT
// similar operation
let currentUserData = JSON.parse(currentUserDataStr);
// make changes to currentUserData
currentUserData.currentUser = "ganesNew"
let newUserDataStr = JSON.stringify(currentUserData)
localStorage.setItem("currentUser", newUserDataStr); // CORRECT

Answer 2

Consider localStorage as a key-value map.
You utilize string keys to access/modify string values. (learn more in MDN documentation)
For objects, the process is like this:

let myObj = {};
my["myKey"] = "myVal"; // keep in mind that non-string values are accepted for objects
my["myKey2"] = 2;
my["myKey3"] = {};

However, localStorage requires strings on both ends:

localStorage.setItem("currentUser", {username: "ganes"}); // AVOID
localStorage.setItem({username: "ganes"}, "someValue"); // AVOID
localStorage.getItem({username: "ganes"}) // AVOID

let currentUserDataStr = localStorage.getItem("currentUser"); // CORRECT
// similar operation
let currentUserData = JSON.parse(currentUserDataStr);
// make changes to currentUserData
currentUserData.currentUser = "ganesNew"
let newUserDataStr = JSON.stringify(currentUserData)
localStorage.setItem("currentUser", newUserDataStr); // CORRECT

Tips for updating the current user's username value in local storage in Angular

Answer №1

Similar questions

Obtain the text from an altered stylesheet in Firefox

Label positioning for checkboxes

The window.onload function is ineffective when implemented on a mail client

Switch to display only when selected

The curious case of looping and peculiar Vue actions

Top Tip for conditionally rendering a styled component inside or outside a wrapper, depending on the screen width

Validation of default values in contact forms

Scrollbar Overlay

Is it Possible to Alter the Title Attribute in AngularJS with ng-class?

Troubleshooting: React CSS Transition Fails to Trigger on Exit and Entry

displaying and activating element using jQuery

Aligning container divs at the center in various screen resolutions

The items in the footer are not all aligned on a single line

Searching for text in an HTML table using PHP DOM query

Adjust the size of the plane in Three.js to match the entire view

Streaming live video on the website

How can I modify the font style in Bootstrap?

Determine the dynamic height of content in a TypeScript file

Customize a web template using HTML5, JavaScript, and jQuery, then download it to your local device

What is the best way to include the border-radius CSS property to a dropdown element in Ant Design?