Search code examples
javascriptcookiesfilereaderweb-storage

JavaScript: Like-Counter with Memory


Complete - Edited Once

I am looking to create a Like Counter with persistent Memory!

Right now, my project is stored on a USB-Drive and I'm not thinking of uploading my semi-finished site to the Internet just yet. I'm carrying it around, plugging and working.
A feature of the site, is a Heart Counter and Like Counter, respective with their symbolic icons.
I have a little sideline JavaScript file that has a dozen functions to handle the click-events and such - such as the Number Count of the counters.

But, as the values of the counters are auto-assigned to Temporary Memory - if you were to reload the page - the counter number would reset to it's default, Zero. A huge headache...

Reading from .txt

I thought of using the experimental ReadFile() object to handle the problem - but I soon found that it needed a user-put file to operate (from my examinations).
Here's my attempt:

if (heartCount || likeCount >= 1) {
    var reader = new FileReader();
    var readerResults = reader.readAsText(heartsAndLikes.txt);
    //return readerResults
    alert(readerResults);
}

When loaded, the page runs through standard operations, except for the above.
This, in my opinion, would have been the ideal solution...

Reading from Cookies

Cookies now don't seem like an option as it resides on a per-computer basis.
They are stored on the computer's SSD, not in the JavaScript File... sad...

HTML5 Web Storage

Using the new Web Storage will be of big help, probably. But again, it is on a per-computer basis, no matter how beautiful the system is...

localStorage.heartCount = 0 //Originally...
function heartButtonClicked() {
    if (localStorage.heartCount) {
        localStorage.heartCount = Number(localStorage.heartCount) + 1
    }
    document.getElementById('heartCountDisplay').innerHTML = localStorage.heartCount
} //Function is tied to the heartCountButton directly via the 'onclick' method

However, I am questioning whether web storage can be carried over on a USB-Drive...

Summarised ideas

Currently, I am looking to Reading and Editing the files, as it's most ideal to my situation. But...
Which would you use? Would you introduce a new method of things?
Please, tell me about it! :)


Solution

  • if (typeof(Storage) !== "undefined") { //make sure local storage is available   
    
    if (!localStorage.heartCount) { //if heartCount is not set then set it to zero
    localStorage.heartCount = 0;
    }
    
    } else {
    alert('Local storage is not available');
    }
    
    function heartButtonClicked() {
    
    if (localStorage.heartCount) { //if heartCount exists then increment it by one
        localStorage.heartCount++;
    }
    
    //display the result
    document.getElementById('heartCountDisplay').innerHTML = localStorage.heartCount 
    }
    

    This will only work on a per computer basis and will not persist on your thumb drive. The only way I can think of to persist the data on your drive is to manually download a JSON or text file.