3分钟入门:浏览器本地存储 Web Storage

写在前面

浏览器本地存储包括两个对象:sessionStoragelocalStorage,它们都是 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

sessionStoragelocalStorage 对比

sessionStorage 是跨会话存储机制,localStorage 是永久存储机制。

作用时间:sessionStorage 在窗口关闭后就会失效,localStorage 是永久存储,除非手动通过 JS 删除或清除浏览器缓存。

作用范围:sessionStorage 的数据只能在同源(协议域名端口号相同)、同一个窗口共享,localStorage 的数据在同源、不同窗口共享(同一个浏览器)

你可能感兴趣的:(前端实用知识点,javascript,前端,localStorage,面试)