js使用SessionStorage存储数据|极客笔记

js使用SessionStorage存储数据

SessionStorage是HTML5提供的一种客户端存储机制，可以在浏览器端存储数据，数据在同一窗口或标签页关闭时会被清除。它用于在会话期间保留数据，可以让用户在不同页面之间共享数据，也可以在页面刷新后保持数据不变。

SessionStorage的基本使用

SessionStorage通过JavaScript的sessionStorage对象来操作。我们可以使用setItem()方法来设置数据，使用getItem()方法来获取数据，使用removeItem()方法来删除数据，使用clear()方法来清空所有数据。

下面是一个使用SessionStorage的简单示例：

// 设置数据
sessionStorage.setItem('username', 'Alice');
sessionStorage.setItem('age', '25');

// 获取数据
const username = sessionStorage.getItem('username');
const age = sessionStorage.getItem('age');
console.log(username, age); // 输出：Alice 25

// 删除数据
sessionStorage.removeItem('age');
const updatedAge = sessionStorage.getItem('age');
console.log(updatedAge); // 输出：null

// 清空所有数据
sessionStorage.clear();

在上面的示例中，我们首先设置了两个数据项username和age，然后分别获取了username和age的值，并且对age进行了删除操作。最后使用clear()方法清空了所有数据。

SessionStorage的特点

SessionStorage有以下特点：

存储的数据仅在同一窗口或标签页关闭前有效，关闭后数据会被清除。
数据以键值对的形式存储，键和值都必须是字符串。
存储的数据仅限于同源，不同源的页面间无法共享数据。

使用SessionStorage实现一个简单的记事本应用

接下来，我们将通过一个简单的示例来演示如何使用SessionStorage来实现一个记事本应用。用户可以在文本框中输入内容，并将其保存在SessionStorage中，当页面被刷新后内容依旧保留。

<!DOCTYPE html>
<html>
<head>
    <title>SessionStorage Notepad</title>
</head>
<body>
    <textarea id="note"></textarea>
    <button id="save">Save</button>
    <button id="clear">Clear</button>

    <script>
        const noteTextarea = document.getElementById('note');
        const saveButton = document.getElementById('save');
        const clearButton = document.getElementById('clear');

        // 当页面加载时，尝试从SessionStorage中获取之前保存的内容
        if(sessionStorage.getItem('note')) {
            noteTextarea.value = sessionStorage.getItem('note');
        }

        // 点击保存按钮时，将文本框中的内容保存到SessionStorage中
        saveButton.addEventListener('click', () => {
            const note = noteTextarea.value;
            sessionStorage.setItem('note', note);
        });

        // 点击清空按钮时，清空文本框中的内容，并从SessionStorage中删除保存的内容
        clearButton.addEventListener('click', () => {
            noteTextarea.value = '';
            sessionStorage.removeItem('note');
        });
    </script>
</body>
</html>

在上面的代码中，我们创建了一个包含文本框和两个按钮的简单HTML页面，用户可以在文本框中输入内容。页面加载时会尝试从SessionStorage中获取之前保存的内容，用户可以点击保存按钮将内容保存到SessionStorage中，点击清空按钮清空内容并从SessionStorage中删除保存的内容。

总结

SessionStorage是一个方便的客户端存储机制，可以在浏览器端存储数据并在同一窗口或标签页关闭前保留。通过sessionStorage对象的方法，我们可以轻松地对数据进行设置、获取、删除和清空操作。在开发中，我们可以利用SessionStorage来实现一些简单的功能，如记事本应用、表单数据存储等。