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全部的键
