Storage 接口
用于脚本在浏览器保存数据。
- 保存的数据都以“键值对”的形式存在。也就是说,每一项数据都有一个键名和对应的值。
- 所有的数据都是以文本格式保存
- 受同域限制 ---- 某个网页存入的数据,只有同域下的网页才能读取,如果跨域操作会报错
只有一个属性:
- Storage.length ---- 返回保存的数据项个数
有五个方法
- Storage.setItem()
用于存入数据 ---- 如果储存空间已满,该方法会抛错
该方法没有返回值
它接受两个参数 (两个参数都是字符串。如果不是字符串,会自动转成字符串,再存入浏览器)
- 第一个是键名 ---- 如果键名已经存在,该方法会更新已有的键值
- 第二个是保存的数据
- 支持直接写入
-
// 下面三种写法等价 window.localStorage.foo = '123'; window.localStorage['foo'] = '123'; window.localStorage.setItem('foo', '123');
-
window.sessionStorage.setItem('key', 'value'); window.localStorage.setItem('key', 'value'); window.sessionStorage.setItem(3, { foo: 1 }); window.sessionStorage.getItem('3'); // "[object Object]"
Storage.getItem()
用于读取数据
只有一个参数,就是键名 ---- 如果键名不存在,该方法返回null
键名应该是一个字符串,否则会被自动转为字符串
-
window.sessionStorage.getItem('key') window.localStorage.getItem('key')
Storage.removeItem()
用于清除某个键名对应的键值
接受键名作为参数 ---- 如果键名不存在,该方法不会做任何事情
-
sessionStorage.removeItem('key'); localStorage.removeItem('key');
Storage.clear()
用于清除所有保存的数据
该方法的返回值是 undefined
-
window.sessionStorage.clear() window.localStorage.clear()
Storage.key()
接受一个整数作为参数(从零开始)
返回该位置对应的键值
-
window.sessionStorage.setItem('key', 'value'); window.sessionStorage.key(0) // "key"
结合使用 Storage.length 属性 和 Storage.key() 方法,可以遍历所有的键
-
for (var i = 0; i < window.localStorage.length; i++) { console.log(localStorage.key(i)); }
55
5
5
window.sessionStorage
保存的数据用于浏览器的一次会话(session),当会话结束(通常是窗口关闭),数据被清空
5
5
5
5
5
window.localStorage
存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5