Is there a way in a GitHub Pages website to store the contents of a textbox between sessions?

user_10470394 0
Viewed 632

What I am trying to do is when someone navigates to my website, it will ask their name or simply have a generic and say "Not you, click here". Afterwards, in the corner it will display "Welcome back, [name]." However, this is a GitHub Pages website so I am not certain if this is possible, and it would have to simply leave out the name.

It does work to simply hardcode a name or have none at all, but without some sort of database or ability to store and retrieve credentials I don't know how I can achieve this.

All I have currently in the webpage is

<p style="text-align:right; color:gray"><i>Welcome back.</i></p>.

I was unable to find something similar to my question on Google, I'm not certain on how to word it besides keywords that don't quite get me where I'm going.

I don't believe that the website can write to the user's system without some sort of cookies, but I do not know much about storing data with them. I'm guessing I will need to take advantage of the HTML5 window.LocalStorage but I am not sure how to implement it.

Essentially, is there a way to store someone's name in cookies, website cache, or somewhere not on the server end, as from what I can tell GitHub Pages is read-only.

html javascript
1 Answers

As pointed out in comments, localstorage (or a cookie) is about the only way to do what you want without your own server or some external service.

This is by no means a permanent storage solution and you have no control over how the user manages their local storage, but here is a minimal example you could throw into an HTML file and open in your browser to test out.

<input id="local-input" onkeydown="store(this)">

<script>
    // keep the contents of the input in local storage, called by input onkeydown
    function store(e) {
        localStorage.setItem('local', e.value)
    }

    // if previous storage exists, use it
    if(localStorage.getItem('local') !== null) {
        document.getElementById('local-input').value = localStorage.getItem('local')
    }
</script>

Local storage is quite easy to use. Refer to online documentation for more examples and guidance: MDN Window.localStorage

user_11619480
Related