javascript怎么保存输入过的记录

JavaScript可以通过几种不同的方式保存输入过的记录：使用本地存储(Local Storage)、使用会话存储(Session Storage)、操作Cookies以及利用Web SQL或IndexedDB技术。这些技术可以使得数据在页面刷新后仍然可用，或在多个页面间共享。本地存储是一种无需发送到服务器即可在本地保存键值对数据的技术，是实现此功能的常见方法。

一、使用本地存储(Local Storage)

本地存储是现代浏览器提供的一种存储机制，它允许网页在用户的浏览器上保存键值对数据，即使关闭浏览器窗口后，数据仍然会被保存。

设置本地存储

要将数据保存到本地存储，你可以使用localStorage.setItem(key, value)方法，其中key是你希望保存的数据的名称，而value就是实际的数据。

function saveInput(key, value) {
    localStorage.setItem(key, value);
}

读取本地存储

之后，你可以通过localStorage.getItem(key)方法来检索保存的数据。

function getInput(key) {
    return localStorage.getItem(key);
}

二、使用会话存储(Session Storage)

会话存储与本地存储非常类似，区别在于会话存储的数据只能在页面会话期间可用，当用户关闭浏览器标签或窗口后，会话存储中的数据将被删除。

设置会话存储

使用sessionStorage.setItem(key, value)方法来保存数据到会话存储。

function saveSessionInput(key, value) {
    sessionStorage.setItem(key, value);
}

读取会话存储

然后，可以使用sessionStorage.getItem(key)方法来获取保存在会话存储中的数据。

function getSessionInput(key) {
    return sessionStorage.getItem(key);
}

三、操作Cookies

Cookies也可以用来在用户的计算机上存储小块的数据。但是，Cookies通常用于跟踪会话，且其大小有限，大约只有4KB。

设置Cookies

你可以通过创建一个函数来设置Cookie。

function setCookie(name, value, daysToLive) {
    // Encode value in order to escape semicolons, commas, and whitespace
    var cookie = name + "=" + encodeURIComponent(value);
    if (typeof daysToLive === "number") {
        /* Sets the max-age attribute so the cookie expires
        after the specified number of days */
        cookie += "; max-age=" + (daysToLive*24*60*60);
        document.cookie = cookie;
    }
}

读取Cookies

要获取存储在Cookie中的数据，需要解析document.cookie对象。

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePAIr = cookieArr[i].split("=");
        if(name == cookiePair[0].trim()) {
            // Decode the cookie value and return
            return decodeURIComponent(cookiePair[1]);
        }
    }
    // Return null if not found
    return null;
}

四、使用Web SQL或IndexedDB

对于更复杂的应用程序，你可能需要一个比本地存储和会话存储更强大的解决方案。Web SQL和IndexedDB是两种可以让你在用户的浏览器上存储大量结构化数据的技术。但是，由于Web SQL已被废弃且不再推荐使用，我们将主要讨论IndexedDB。

初始化IndexedDB

var db;
var request = window.indexedDB.open("MyTestDatabase", 3);
request.onerror = function(event) {
    // 错误处理
};
request.onsuccess = function(event) {
    db = event.target.result;
    // 接下来，你可以通过db对象来操作数据库
};

使用IndexedDB存储数据

function saveIndexedDBData(db, storeName, data) {
    var transaction = db.transaction([storeName], "readwrite");
    var store = transaction.objectStore(storeName);
    var request = store.add(data);
    request.onsuccess = function(e) {
        console.log('数据写入成功');
    };
    request.onerror = function(e) {
        console.log('数据写入失败');
    };
}

从IndexedDB读取数据

function readIndexedDBData(db, storeName, key) {
    var transaction = db.transaction([storeName]);
    var store = transaction.objectStore(storeName);
    var request = store.get(key);
    request.onsuccess = function(e) {
        var result = e.target.result;
        console.log('读取的数据：', result);
    };
    request.onerror = function(e) {
        console.log('数据读取失败');
    };
}