首页sessionStorage实现缓存与显示缓存结果

sessionStorage实现缓存与显示缓存结果

时间: 2023-10-14 16:25:44 浏览: 86

sessionStorage 是浏览器提供的一种本地存储方案，可以将数据存储在浏览器的会话中，当页面关闭时数据也会被清除。使用 sessionStorage 可以实现前端的缓存功能。下面是一个简单的例子，展示如何使用 sessionStorage 来实现缓存和显示缓存结果： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Session Storage Example</title> </head> <body> <h1>Session Storage Example</h1> <form> <label for="input">Input:</label> <input type="text" id="input"> <button type="button" onclick="storeData()">Save</button> </form> <div id="output"></div> <script> function storeData() { var input = document.getElementById('input').value; sessionStorage.setItem('data', input); displayData(); } function displayData() { var output = document.getElementById('output'); var data = sessionStorage.getItem('data'); if (data) { output.innerHTML = 'Data in session storage: ' + data; } else { output.innerHTML = 'No data in session storage.'; } } displayData(); </script> </body> </html> ``` 这个例子中，我们创建了一个表单，让用户输入一些数据，然后通过点击按钮来将数据存储到 sessionStorage 中。同时，我们还创建了一个显示缓存结果的区域，通过调用 `sessionStorage.getItem()` 来获取存储在 sessionStorage 中的数据，并将其显示出来。在页面刷新或关闭后，存储在 sessionStorage 中的数据会被清除，因此下次访问页面时将无法显示之前存储的数据。需要注意的是，sessionStorage 只能存储字符串类型的数据，如果需要存储其他类型的数据，可以使用 `JSON.stringify()` 和 `JSON.parse()` 方法进行转换。

阅读全文