HTML5 WEB 存储

在HTML5中，Web Storage提供了两种在客户端存储数据的新方法：localStorage和sessionStorage。

localStorage

localStorage是HTML5新增的一个在本地保存数据的功能，用于长久保存整个网站的数据，保存的数据没有时间限制。可以手动删除数据。




<!DOCTYPE html>
<html>
<body>
 
<h2>Local Storage</h2>
 
<p>Click the button to set a local storage item.</p>
 
<button onclick="setLocalStorage()">Set Local Storage Item</button>
 
<button onclick="getLocalStorage()">Get Local Storage Item</button>
 
<button onclick="removeLocalStorage()">Remove Local Storage Item</button>
 
<button onclick="clearLocalStorage()">Clear Local Storage</button>
 
<p id="demo"></p>
 
<script>
function setLocalStorage() {
    localStorage.setItem("key", "value");
}
 
function getLocalStorage() {
    var value = localStorage.getItem("key");
    document.getElementById("demo").innerHTML = value;
}
 
function removeLocalStorage() {
    localStorage.removeItem("key");
}
 
function clearLocalStorage() {
    localStorage.clear();
}
</script>
 
</body>
</html>

sessionStorage

sessionStorage也是HTML5新增的一个在本地保存数据的功能，但是它和localStorage不同，它只是在当前会话中保存数据，关闭页面就会消失。




<!DOCTYPE html>
<html>
<body>
 
<h2>Session Storage</h2>
 
<p>Click the button to set a session storage item.</p>
 
<button onclick="setSessionStorage()">Set Session Storage Item</button>
 
<button onclick="getSessionStorage()">Get Session Storage Item</button>
 
<button onclick="removeSessionStorage()">Remove Session Storage Item</button>
 
<button onclick="clearSessionStorage()">Clear Session Storage</button>
 
<p id="demo"></p>
 
<script>
function setSessionStorage() {
    sessionStorage.setItem("key", "value");
}
 
function getSessionStorage() {
    var value = sessionStorage.getItem("key");
    document.getElementById("demo").innerHTML = value;
}
 
function removeSessionStorage() {
    sessionStorage.removeItem("key");
}
 
function clearSessionStorage() {
    sessionStorage.clear();
}
</script>
 
</body>
</html>

以上代码展示了如何使用localStorage和sessionStorage进行数据的存储、读取、删除和清除。

注意：localStorage和sessionStorage中存储的数据都是以字符串的形式进行存储的，如果要存储对象，需要使用JSON.stringify()将对象转换为字符串，读取时使用JSON.parse()将字符串转换回对象。

评论已关闭

推荐阅读