javascriptradio-button

How can I save radio button values to local file for a video gallery?

I'm building a video gallery which spans over 15 pages so far. My pages consists of a thumb for each video clip. Each page contains between 200 to 300 thumbs. When the thumb it selected, it opens a modal with pic, description & play button to view video. I'm using a star rating module called StarRate which gives each thumb a set of 5 stars to rate the video. Each star is a radio button which you can select to give each thumb the desired rating. All works as intended, but I need ability to load the values of the radio buttons when the page loads from a local file. I also need it to save all values whenever a rating is changed, overwriting the original file so it will be updated when the page is opened later. This runs on local machine and isn't on a server and only runs locally, so I have no database available to store and retrieve the values. I have considered localstorage, but would prefer to save as a local file. I have no preference for file type (ie. JSON, TXT etc). I am a beginner so any help you can provide would be greatly appreciated :)

Localstorage seems to be a bad choice for my needs. If and/or when localstorage get cleared or deleted all the ratings for the various thumbs will be lost. I'm researching how to use mysql running on localhost to store the rating for each thumb as an alternative to storing to local file.

This is an example of my code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

<title>Video Gallery</title>
    
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
    <link type="text/css" href="assets/StarRate/jquery-ui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
    <link rel="stylesheet" type="text/css" href="assets/css/thumbs_new.css" />
    <link href='assets/StarRate/jquery.rating.css' type="text/css" rel="stylesheet"/>

    <script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="assets/StarRate/jquery-ui.min.js"></script>
    <script type="text/javascript" src="assets/js/pre_load_img.js"></script>
    <script type="text/javascript" src="assets/js/rdm_bg_imgV2.js"></script>
    <script type="text/javascript" src="assets/StarRate/jquery.MetaData.js"></script>
    <script type="text/javascript" src="assets/StarRate/jquery.rating.js"></script>

</head>
<body>
<div id="wrapper">

!--   Page Header   -->
<a name="pagetop" ></a>
<div id="banner" align="center"><img src="images/banner.png" width="75%" /></div>

<!--   Menu -->  
<div align="center"><script type="text/javascript" src="assets/js/navmenu.js"></script></div>

<div id="content">
<div class="thumbContainer">
    <button class="btn-thumb" id='pic10' href="#M1"></button>
    <div class="starContainer">
        <input class="hover-star" type="radio" name="m1" value="1" title="Very poor"/>
        <input class="hover-star" type="radio" name="m1" value="2" title="Poor"/>
        <input class="hover-star" type="radio" name="m1" value="3" title="OK"/>
        <input class="hover-star" type="radio" name="m1" value="4" title="Good"/>
        <input class="hover-star" type="radio" name="m1" value="5" title="Very Good"/>
    </div>
</div>
<div class="thumbContainer">
    <button class="btn-thumb" id='pic20' href="#M2"></button>
    <div class="starContainer">
        <input class="hover-star" type="radio" name="m2" value="1" title="Very poor"/>
        <input class="hover-star" type="radio" name="m2" value="2" title="Poor"/>
        <input class="hover-star" type="radio" name="m2" value="3" title="OK"/>
        <input class="hover-star" type="radio" name="m2" value="4" title="Good"/>
        <input class="hover-star" type="radio" name="m2" value="5" title="Very Good"/>
    </div>
</div>

<div id="M1"class="modal"><div class="modal-content">
<div class="modal-header"><span class="close">×</span><h2>video 1</h2></div>
<div class="modal-body">
    <div class="popupDivPic"><img src="images/posters/video1.jpg" /></div>
    <div class="popupDivTxt">
        <div class="genreBox">Educational</div>
        <div class="DivTxtContainer">
            <div class="DivTxtColumn1">Rating :<span class="ratingNUM">7.5</span></div>
            <div class="DivTxtColumn2">Runtime :<span class="runtimeNUM">53min</span></div>
        </div>
        <a href="file:///O|\videos/video1.mkv" title="Start video"><img src="images/playBTN2.gif" /></a><br/>
        <p>description</p><br/>
    </div>
</div>
<div class="modal-footer"></div>
</div></div>

<div id="M2"class="modal"><div class="modal-content">
<div class="modal-header"><span class="close">×</span><h2>video 2</h2></div>
<div class="modal-body">
    <div class="popupDivPic"><img src="images/posters/video2.jpg" /></div>
    <div class="popupDivTxt">
        <div class="genreBox">Educational</div>
        <div class="DivTxtContainer">
            <div class="DivTxtColumn1">Rating :<span class="ratingNUM">5.5</span></div>
            <div class="DivTxtColumn2">Runtime :<span class="runtimeNUM">45min</span></div>
        </div>
        <a href="file:///O|\videos/video2.mkv" title="Start video"><img src="images/playBTN2.gif" /></a><br/>
        <p>description</p><br/>
    </div>
</div>
<div class="modal-footer"></div>
</div></div>


</div><!--   content closed  -->
</div><!--   wrapper closed  -->
<script type="text/javascript" src="assets/js/open_modal.js"></script>
<div class="footer"><h1><a href="#pagetop" >Back to top</a></h1></div> 
<script type="text/javascript"> ChangeIt(); </script> 

</body>
</html>

I found this example here on stack overflow which will save the name & values of the radio buttons on page into a text file. I working on next two issues now. When saved it creates a new text file on every save instead of overwriting the existing one. Text.txt, Text(1).txt, etc. Next I would like to save using an onclick event whenever a rating is changed. Can anyone help with how to overwrite Text.txt instead or creating new file?

<script>
var separator = "_*_";
function saveTextAsFile() {
    var textToSave = "";
    // Add the selected radio button value
    var ele = document.getElementsByTagName('input');
    for (i = 0; i < ele.length; i++) {
        if (ele[i].type = "radio") {
            if (ele[i].checked)
                textToSave += ele[i].name + separator + ele[i].value + separator;
        }
    }
    var textToSaveAsBlob = new Blob([textToSave], {type: "text/plain" });
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = "Text.txt";
    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
    downloadLink.click();
}

function destroyClickedElement(event) { 
    document.body.removeChild(event.target);
}

</script>

I've enjoyed the challenge of getting this little code snippet working, but I have decided my best solution is I plan to install xampp and use mysql to store the values of the thumb ratings (which will be an all new learning challenge). It will actually open some new abilities for me having php & mysql available.

Solution

  • Have you tried localStorage?

    localStorage is a web storage mechanism provided by web browsers that allows JavaScript applications to store data as key-value pairs.

    How-to-set-values:

    localStorage.setItem("myCat", "Tom");

    How-to-get-values:

    const cat = localStorage.getItem("myCat");

    Check it out here for more details: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage