HTML DOM窗口的localStorage属性允许您使用对象在Web浏览器中存储值对。这是一个只读属性。即使关闭浏览器,该对象也不会过期。因此,数据永远不会丢失。
用法:
window.localStorage
使用以下命令将数据保存到localStorage:
localStorage.setItem("key", "value");
使用以下命令从localStorage读取数据:
var name = localStorage.getItem("key");
使用以下方法从localStorage中删除数据:
localStorage.removeItem("key");
示例1:保存,读取和删除数据到localStorage
HTML | DOM Window localStorage Properties
//saving data locally
function save() {
var fieldValue =
document.getElementById('textfield').value;
localStorage.setItem('text', fieldValue);
}
//reading data
function get() {
var storedValue = localStorage.getItem('text');
if (storedValue) {
document.getElementById(
'textfield').value = storedValue;
}
}
//removing stored data
function remove() {
document.getElementById(
'textfield').value = '';
localStorage.removeItem('text');
}
Type something in the text field and It
will Get stored locally by Browser
when you reopen or reload this page,your text
is still there.
click on clear to remove it.
输出:
保存数据之前:
保存数据后:
示例2:检查存储类型并保存数据。
HTML | DOM Window localStorage Properties
if (typeof(Storage) !==
"undefined") {
localStorage.setItem("name",
"GEEKSFORGEEKS");
document.getElementById(
"SHOW").innerHTML =
localStorage.getItem("name");
} else {
document.getElementById(
"SHOW").innerHTML =
"YOUR BROWSER DOES NOT" +
"SUPPORT LOCALSTORAGE PROPERTY";
}
输出:
支持的浏览器:下面列出了DOM Window localStorage支持的浏览器:
谷歌浏览器
IE浏览器
Firefox
Opera
Safari