mirror of
https://github.com/Estom/notes.git
synced 2026-02-03 18:44:19 +08:00
5.6 KiB
5.6 KiB
在开发 Web 应用时，开发人员有时需要在本地存储数据。当前浏览器支持 cookie 存储，但其大小有 4KB 的限制。
HTML5 中新引入了 Web Storage 机制，通过使用键值对在客户端保存数据，并且提供了更大容量的存储空间。
HTML5 中的 Web 存储对象有两种类型：
- sessionStorage 对象负责存储一个会话的数据。如果用户关闭了页面或浏览器，则会销毁数据。
- localStorage 对象负责存储没有到期的数据。当 Web 页面或浏览器关闭时，仍会保持数据的存储，当然这还取决于为此用户的浏览器设置的存储量。
这两种存储对象具有相同的方法和属性。
**值得注意的是：**Web 存储并不比 cookies 安全。所以不要在客户端存储敏感信息，比如密码或信用卡信息。
官方规范资料地址：https://html.spec.whatwg.org/multipage/webstorage.html
sessionStorge
浏览器支持性检查
//sessionStorage
if(window.sessionStorage){
alert(“support sessionStorage”);
}else{
alert(“not support sessionStorage”);
// 不支持 sessionStorage
}
sessionStorage的方法
| 方法名称 | 描述 |
|---|---|
| setItem(key, value) | 为 Web 存储对象添加一个键/值对，供以后使用。该值可以是任何的数据类型：字符串、数值、数组等。 |
| getItem(key) | 基于起初用来存储它的这个键检索值。 |
| clear() | 从此 Web 存储对象清除所有的键/值对。 |
| removeItem(key) | 基于某个键从此 Web 存储对象清除特定的键/值对。 |
| key(n) | 检索 key[n] 的值。 |
a. 向 Web 存储对象添加键/值对
- 使用
setItem()方法
sessionStorage.setItem('myKey', 'myValue');
- 使用 Web 存储对象来直接设置此键的值
sessionStorage.myKey = 'myValue';
b. 从 Web 存储对象中检索键/值对
- 使用
getItem()方法
sessionStorage.getItem('myKey');
- 使用 Web 存储对象来直接获取此键的值
sessionStorage.myKey;
c. 删除所有键/值对
sessionStorage.clear();
d. 删除单个键/值对
sessionStorage.removeItem('myKey');
示例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sessionStorage</title>
</head>
<body>
<input type="text" id="data">
<input type="button" id="save" value="保存">
<input type="button" id="read" value="读取">
<input type="button" id="dele" value="删除">
<script>
var save = document.getElementById("save");
save.onclick = function(){
// 将用户输入的数据,保存到sessionStorage中
// 1. 获取用户输入的数据
var value = document.getElementById("data").value;
// 2. 如何生成存储数据所使用的KEY
var key = new Date().getTime();// 时间戳
// 3. 存储数据
window.sessionStorage.setItem(key,value);
}
var read = document.getElementById("read");
read.onclick = function(){
// 读取sessionSotorage中所有的数据
// 1. 获取当前sessionStorage中所有数据的个数
var count = window.sessionStorage.length;
// 2. 进行遍历
for(var i=0;i<count;i++){
// 3. 根据索引值得到key
var key = window.sessionStorage.key(i);
// 4. 根据key值得到value
var value = window.sessionStorage.getItem(key);
// 5. 进行测试
console.log(key + " : " + value);
}
}
var dele = document.getElementById("dele");
dele.onclick = function(){
// removeItem()
//window.sessionStorage.removeItem(1452666425707);
window.sessionStorage.clear();
}
</script>
</body>
</html>
localStorage
浏览器支持性检查
//localStorage
if(window.localStorage){
alert(“support localStorage”);
}else{
alert(“not support localStorage”);
// 不支持 localStorage
}
localStorage的方法
| 方法名称 | 描述 |
|---|---|
| setItem(key, value) | 为 Web 存储对象添加一个键/值对，供以后使用。该值可以是任何的数据类型：字符串、数值、数组等。 |
| getItem(key) | 基于起初用来存储它的这个键检索值。 |
| clear() | 从此 Web 存储对象清除所有的键/值对。 |
| removeItem(key) | 基于某个键从此 Web 存储对象清除特定的键/值对。 |
| key(n) | 检索 key[n] 的值。 |
a. 向 Web 存储对象添加键/值对
- 使用
setItem()方法
localStorage.setItem('myKey', 'myValue');
- 使用 Web 存储对象来直接设置此键的值
localStorage.myKey = 'myValue';
b. 从 Web 存储对象中检索键/值对
- 使用
getItem()方法
localStorage.getItem('myKey');
- 使用 Web 存储对象来直接获取此键的值
localStorage.myKey;
c. 删除所有键/值对
localStorage.clear();
d. 删除单个键/值对
localStorage.removeItem('myKey');
localStorage的事件
如果想在存储成功或修改存储的值时执行一些操作，可以用 Web Storage 接口提供的事件。
// 显示存储事件的相关内容
function handleStorageEvent(e) {
document.write(“key” + e.key + “oldValue” + e.oldValue + “newValue” + e.newValue);
}
// 添加存储事件监听
window.addEventListener(“storage”, handleStorageEvent, false);
| 事件参数 | 描述 |
|---|---|
| key | 发生改变的键 |
| oldValue | 键改变之前的值 |
| newValue | 键改变之后的值 |
| url | 触发存储事件的页面 url |