markdown JS.JSON.PERSONALSTORAGE.Study at edX - 使用Web存储播放废话

Posted 2021-05-05

"use strict";
var guessCount = 0; // Effectively lenght of sessionStorage.

// Dynamic table.
function fDynTable(tableData) {
    var oldTable = document.querySelector("table");
    var table1 = document.createElement("table");
    var tcaption1 = table1.createCaption();
    var tbody1 = table1.createTBody();
    var tcaption1Text = document.createTextNode("Top 10");
    if (oldTable !== null) {
        document.body.removeChild(oldTable);
    }
    tcaption1.appendChild(tcaption1Text);
    tableData.forEach(function(try1) {
        var tRow1 = tbody1.insertRow();
        try1.forEach(function(cellData) {
            var tCell = tRow1.insertCell();
            var tCellText = document.createTextNode(cellData);
            tCell.appendChild(tCellText);
        });
    });
    document.body.appendChild(table1);
    fTableStyle();
}

// Styling the table.
function fTableStyle() {
    var table1 = document.querySelector("table");
    var rowsOdd = table1.querySelectorAll("tr:nth-child(odd)");
    var td1 = table1.querySelectorAll("td");
    td1.forEach(function(tdCur) {
        tdCur.style.padding = "10px";
    });
    rowsOdd.forEach(function(rowCur) {
        rowCur.style.backgroundColor = "lime";
    });
}

// Main process. First, we create a random number, compare it to user input. Then combine sessionStorage into array "tableData". Then we sort it, then splice it if necessary.
function fGuessingGame() {
    var randomNumber = Math.round(Math.random() * 100);
    var input1 = document.querySelector("input[type='number']");
    var score1 = randomNumber - Number(input1.value);
    var recordNameTemplate = "Try#";
    var recordName;
    var howManyRecords;
    var tableData = [], currentRecord = [], keyName;
    guessCount += 1;
    recordName = recordNameTemplate + guessCount;
    sessionStorage.setItem(recordName, score1);
    howManyRecords = sessionStorage.length;
    for (var i = 0; i < howManyRecords; i++) {
      //Sadly code below does not work.
        /*var key1 = sessionStorage.key(i);
        currentRecord[0] = key1;
        currentRecord[1] = sessionStorage.getItem(key1);*/
        /*currentRecord[0] = sessionStorage.key(i);
        currentRecord[1] = sessionStorage.getItem(currentRecord[0]);
        tableData.push(currentRecord);*/
        /*tableData[i][0] = sessionStorage.key(i);
        keyName = tableData[i][0];
        tableData[i][1] = sessionStorage.getItem(keyName);*/
        var key1 = sessionStorage.key(i);
        var value1 = sessionStorage.getItem(key1);
        tableData[i] = [key1, value1];
    }
    tableData.sort(function(a, b) {return Math.abs(Number(a[1])) - Math.abs(Number(b[1]));});
    if (howManyRecords >= 10) {
        tableData.splice(10, howManyRecords - 10);
    }
    fDynTable(tableData);
}

// User interface. A paragraph, an input field and a button.
function fUI() {
    var rulesParagraph = document.createElement("p");
    var inputField = document.createElement("input");
    var buttonSubmit = document.createElement("input");
    var rulesText;
    if (typeof(Storage) !== undefined) {
        rulesText = document.createTextNode("Each round the program will generate random number between 0 and 100. Try to guess it and see the difference between your guess and that random number.");
    } else {
        rulesText = document.createTextNode("Sorry, no Web Storage support. Please try another browser.");
    }
    inputField.type = "number";
    inputField.min = 0;
    inputField.max = 100;
    inputField.step = 1;
    inputField.placeholder = "0 - 100";
    inputField.style.marginRight = "10px";
    buttonSubmit.type = "button";
    buttonSubmit.value = "Submit";
    buttonSubmit.addEventListener("click", fGuessingGame, false);
    rulesParagraph.appendChild(rulesText);
    document.body.appendChild(rulesParagraph);
    document.body.appendChild(inputField);
    document.body.appendChild(buttonSubmit);
}
fUI();
sessionStorage.clear();

JS.JSON.PERSONALSTORAGE.Study at edX - Playing Nonsense with Web Storage
------------------------------------------------------------------------


A [Pen](https://codepen.io/Onlyforbopi/pen/NOKjRL) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).

[License](https://codepen.io/Onlyforbopi/pen/NOKjRL/license).