localStorage 和 sessionStorage 属性都允许在浏览器中存储 key/value 键值对的数据。
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动删除。
属性 | 描述 |
length | 返回存储对象中包含多少条数据 |
方法 | 描述 |
key(n) | 返回存储对象中第 n 个键的名称 |
getItem(keyname) | 返回指定键的值 |
setItem(keyname, value) | 添加键和值,如果对应的值存在,则更新该键对应的值 |
removeItem(keyname) | 删除键 |
clear() | 删除存储对象中所有的键 |
localStorage 和 sessionStorage 的属性和方法完全相同,下面用 localStorage 举例
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="storageLength()">localStorage存储的键值对条数</button>
<button onclick="keyIndex()">返回localStorage第n个键</button>
<button onclick="clearKey()">删除key1</button>
<button onclick="clearAllKey()">删除全部key</button>
<script>
localStorage.setItem("key1", "花前月下暂相逢");
localStorage.setItem("key2", "苦恨阻从容");
localStorage.setItem("key3", "何况酒醒梦断");
localStorage.setItem("key4", "花谢月朦胧");
function storageLength(){
alert(localStorage.length); //localStorage存储的键值对条数,此处为 4
};
function keyIndex(){
alert(localStorage.key(0)); //返回第0个key的名字
};
function clearKey(){
localStorage.removeItem("key1"); //删除localStorage指定key
};
function clearAllKey(){
localStorage.clear(); //删除localStorage全部key
};
</script>
</body>
</html>
运行如下
全部键值对
获取localStorage的全部键的个数
获取localStorage的第0个键
删除localStorage的键key1
删除localStorage全部的键