本地存储localstorage

本地存储localstorage

localstorage

• html5中的 Web Storage 存储方式
• localStorage用于存储一个域名下的需要永久存储在本地的数据，这些数据可以一直被访问，直到这些数据被删除

Web Storage API

1. 添加键值对

   添加键值对:localStorage.setItem(key,value) setItem 用于把值value 存储到键key 上，除了使用setItem ，还可以使用localStorage.key=value 或者localStorage['key']=value 这两种形式，另外需要注意的是，key 和 value 值必须是字符串形式的，如果不是字符串，会调用他们相应的toString() 方法来转换成字符串再存储。当我们要存储对象时，应先转换成我们可以识别的字符串格式(比如JSON格式)再进行存储。

   //把一个用户名(jack)存储到name上
   localStorage.setItem('name','jack')
   //localStorage.name = 'jack'
   //localStorage['name'] = 'jack'
   //把一个用户存储到user的键上
   localStorage.setItem('user',JSON.stringify(id:1,name:'jack'))
   

   2. 获取键值对

      获取键值对:localStorage.getItem(key) getItem 用于获取键key 对应的数据，和setItem 一样，getItem 也有两种等效形式value = localStorage.key 和 value = localStorage['key'] 。获取到的value值是字符串类型，如果需要其他类型，要手动的类型转换

      //获取存储到name的键上的值
      let name = localStorage.getItem('name')
      //let name = localStorage.name
      //let name = localStorage['name']
      let user = JSON.parse(localStorage.getItem('user'))
      

   3. 删除键值对

      删除键值对:localStorage.removeItem(key) removeItem 用于删除键值对，localStorage没有数据过期的概念，所有数据如果失效了，需要开发者手动删除

      let name = localStorage.getItem('name')	//jack
      //删除存储到name的键上的值
      localStorage.removeItem('name')
      name = localStorage.getItem('name')	//null
      

   4. 清除所有键值对

      清除所有键值对:localStorage.clear() clear 用于清除所有存储的内容，它和removeItem 不同的地方是removeItem 删除的是某一项，而clear是删除所有

      //清除所有localStorage
      localStorge.clear()
      let len = localStorage.length //0
      

使用场景

基于 Web Storage 的特点，它主要被用于储存一些不经常改动的，不敏感的数据，比如全国省市区县信息。还可以存储一些不太重要的跟用户相关的数据，
比如说用户的头像地址、主题颜色等，这些信息可以先存储在用户本地一份，便于快速呈现，等真正从服务器端读取成功后再更改头像地址，主题颜色。另外，基于 storage 事件特点，Web Storage 还可以用于同域不同窗口间的通信。

浏览器查看