乐趣区

关于前端:3分钟搞定浏览器本地存储-Web-Storage

jiezi

写在后面

浏览器本地存储包含两个对象：sessionStorage 和 localStorage，它们都是 Storage 的实例对象。

window.localStorage instanceof Storage; // true

Web Storage 的根本应用

查 - 拜访数据：getItem() 办法。

增改 - 增加、批改数据：setItem() 办法。

删 - 删除数据：removeItem() 办法。

清空数据：clear() 办法。

获取给定索引地位对应的键名：key() 办法。

// 以 localStorage 为例，sessionStorage 是殊途同归之妙
// 增加数据
localStorage.setItem('name', 'bruce')
localStorage.setItem('age', 2333)

// 批改数据
localStorage.setItem('age', 520); // {name: 'bruce', age: 520}

// 读取数据
localStorage.getItem('age'); // 520

// 删除数据
localStorage.removeItem('name'); // {age: 520}

// 清空数据
localStorage.clear(); 

// 遍历 localStorage 的所有值
// 依据索引地位，利用 key() 办法获取到键名，进而应用 getItem() 办法取到对应的值
for (let i = 0; i < localStorage.length; i++) {let key = localStorage.key(i);
  let value = localStorage.getItem(key);
  console.log(`key: ${key}, value: ${value}`);
}

注意事项

localStorage 和 sessionStorage 都只可能存储字符串，如果不是字符串的值，会隐式调用 toString() 办法将其转换成字符串。

如果想要存储对象，须要应用 JSON.stringify() 将对象转换为 JSON 字符串再存储，应用 JSON.parse() 办法还原成对象。

如果无奈转成字符串，则会报错。比方 Symbol 类型的变量无奈转成字符串，因而浏览器存储对象无奈贮存 Symbol 类型变量。

let obj = {book: 'HTTP', price: 46};
let obj2 = {};
function fn() {};

localStorage.setItem(obj, 'object'); // '[object Object]': 'object'
localStorage.setItem('func', fn); // 'func': 'function fn() {}'

localStorage.setItem('info', JSON.stringify(obj)); // 'info': '{\"book\":\"HTTP\",\"price\":46}'

localStorage.getItem(obj2); // 'object'，obj2 会被转成 '[object Object]'，和 obj 的键名雷同，因而取到的值也雷同


localStorage.setItem('symbol', Symbol(666)); // Uncaught TypeError: Cannot convert a Symbol value to a string

sessionStorage 与 localStorage 比照

sessionStorage 是跨会话存储机制，localStorage 是永恒存储机制。

作用工夫：sessionStorage 在窗口敞开后就会生效，localStorage 是永恒存储，除非手动通过 JS 删除或革除浏览器缓存。

作用范畴：sessionStorage 的数据只能在 同源 （协定域名端口号雷同）、 同一个窗口 共享，localStorage 的数据在 同源、不同窗口共享（同一个浏览器）。

退出移动版