js本地存储：localStorage & sessionStorage

js本地存储：localStorage & sessionStorage

原文：js本地存储：localStorage & sessionStorage

localStorage和sessionStorage都是H5的产物，可以理解为cookies的升级版，他们的作用是在浏览器中存储key-value数据。

• localStorage用于永久的保存整个网站的数据，保存的数据没有过期时间，保存的数据需要手动删除。
• sessionStorage仅作用在会话级别，当你关闭会话（关闭窗口）后所有保存的数据自动清空。

localStorage和sessionStorage能存储的数据容量一般都为5M，比原先的cookies大很多。

而且localStorage和sessionStorage比原来的cookies更具安全性，隐私模式下无法被获取，且无法被爬虫获取。

值得一说的是，localStorage和sessionStorage只支持String类型数据存储，其他类型要使用都需要在存取过程中先进行类型转换。

用法

1. 保存数据

   //方法一、
   window.localStorage.setItem('keyString', 'valueString')
   //方法二、
   window.localStorage.keyString = valueString
   //方法三、
   window.localStorage['keyString'] = valueString
   

2. 读取数据

   //方法一、
   let value = window.localStorage.getItem('keyString')
   //方法二、
   let value = window.localStorage.keyString
   //方法三、
   let value = window.localStorage['keyString']
   

3. 删除数据

   //方法一、删除所有数据
   window.localStorage.clear()
   //方法二、删除指定数据
   window.localStorage.removeItem('keyString')
   

4. 修改数据

   //方法一、
   window.localStorage.keyString = 'newValueString'
   //方法二、
   window.localStorage['keyString'] = 'newValueString'
   //也可活用上面提供的方法进行数据修改
   

5. 获取键名

   window.localStorage.key(index)
   //该方法可以通过索引获取key名，在忘记key名的时候可以使用
   //typeof index 为 Number
   

**PS：**localStorage和sessionStorage除了时效区别，其他用法都一样；对于存取数据的方法官方推荐使用setItem和getItem方法。

其他用法

1. 存取JSON数据

   因为localStorage和sessionStorage仅限制存储String类型数据，所以存储JSON数据需要先用JSON.stringify()方法转为JSON字符串，用的时候再用JSON.parse()方法转为JSON格式。

   const data = {
       id: 20211003,
       name: 'zhangsan',
       sex: 'man'
   }
   //存
   const dataString = JSON.stringify(data)
   window.localStorage.setItem('data', dataString)
   //取
   const jsonString = window.localStorage.getItem('data')
   const jsonObj = JSON.parse(jsonString)
   console.log(jsonObj)
   

2. storage事件

   window.addEventListener('storage', onStorageChange)
   
   function onStorageChange(e) {
       console.log(e.key) //发生变化的键名
       console.log(e.oldValue) //更新前的值。如果该键为新增加，则这个属性为null。
       console.log(e.newValue) //更新后的值。如果该键被删除，则这个属性为null。
       console.log(e.url) //原始触发storage事件的那个网页的网址。
   }
   

   **PS：**该事件只会在除触发页面之外的其他页面触发，IE会在所有页面触发

参考博客

JavaScript使用localStorage存储数据

localStorage使用总结

注：本博客仅供个人学习，如有错误、侵权敬请指出。