localStorage
, sessionStorage
都可以用于在客户端浏览器存储数据, 与 cookie
不同的是, 发起 http 请求并不会自动携带 localStorage
, sessionStorage
localStorage
, sessionStorage
只是生命周期不同, 它们的 api 是相同的, 例如 setItem
getItem
clear
removeItem
key
length
localStorage
, sessionStorage
存入的 key 和 value 都固定是字符串, 如果存入我们存入对象, 那么会转为固定的字符串 [object Object]
, 这不是我们期望的, 可以调用 JSON.stringify
转为 json 字符串再存入localStorage
生命周期是永久, 只要用户不清理浏览器缓存即可. 而 sessionStorage
生命周期仅限于浏览器关闭前, 即浏览器一旦关闭, 那么 sessionStorage
数据就会丢失localStorage
, sessionStorage
的作用域都是相同的, procotol://ip或者domain:port
注意: http://www.baidu.com
与 https://www.baidu.com
的 storage 不能共享, 因为协议不同, http://a.baidu.com
与 http://b.baidu.com
也不能共享, 因为域名不同
let username = 'username';
localStorage.setItem(username, '你好鸭')
console.log(`localStorage.getItem('username') = ${localStorage.getItem(username)}`)
for (let i = 0; i < localStorage.length; i++){
console.log(`key = ${localStorage.key(i)}, value = ${localStorage.getItem(localStorage.key(i))}`);
}
localStorage.removeItem(username)
console.log(`localStorage.getItem('username') = ${localStorage.getItem(username)}`)
localStorage.clear();