Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM Making Changes to the DOM Remove Nodes

Samuel Kleos
seal-mask
.a{fill-rule:evenodd;}techdegree
Samuel Kleos
Front End Web Development Techdegree Student 13,674 Points

Removing items works temporarily but I want to go further.

DOM scripting like this is very exciting. I like modifying elements in the page, and I hope to use injected javascript to do that on existing pages.

However, if I reload the page or go forward and back in my browsing history, my changes to the DOM are not persisted. Everything reverts back to the source HTML.

What is the simplest way to create a personalized DOM for every visitor that persists throughout the page visit? I want to use code injection to help users personalize their browsing experience every time they visit my page.

1 Answer

Bella Bradbury
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bella Bradbury
Front End Web Development Techdegree Graduate 32,790 Points

Hi Samuel!

In order to keep client input and data you're going into less front end development and more back end. In Javascript Middleware you are able to access user data to send back to the server or you could access localstorage to keep it client-side. I'm sure you've experienced this first hand when a website asks you to accept Cookies. That is essentially the website asking you to allow it to keep your data and personalize their site based on that gathered data.

There's some great courses from Treehouse that might help you in your research:

I hope this helps!

Samuel Kleos
seal-mask
.a{fill-rule:evenodd;}techdegree
Samuel Kleos
Front End Web Development Techdegree Student 13,674 Points

I don't think Express or other* middleware let you store data client side. Can't you store it client-side with Web Storage API rather than on the server with Express.js?

  • express-session "Note: Session data is not saved in the cookie itself, just the session ID. Session data is stored server-side."

  • Client-side Storage "The Web Storage API provides a mechanism for storing and retrieving smaller, data items consisting of a name and a corresponding value."

Bella Bradbury
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bella Bradbury
Front End Web Development Techdegree Graduate 32,790 Points

Here is a little article on localstorage vs cookies. Express is middleware, if you want to connect from the servers to the client you will need middleware. You can use a client-side storage API as well, like Node.js localstorage or HTML Web Storage API.

As with most things in coding, there are many options. My initial answer was intend as an entry point, directing you towards Treehouse's information and other resources so you could begin your own research and make informed decisions for your projects. If you've found that Web Storage API is the best fit for your situation then that's the way you should go!

Samuel Kleos
seal-mask
.a{fill-rule:evenodd;}techdegree
Samuel Kleos
Front End Web Development Techdegree Student 13,674 Points

I was looking for code injection solutions to help users personalize their browsing experience as opposed to server-side solutions that were available for learning on Treehouse.

However, thank you for introducing me to Node.js localstorage! I hadn't heard of that before.

With regards to my objective of finding the simplest way of using javascript injection for persisting data, I will keep looking. :)