localStorage

localStorage是window下的对象，可以使用window.localStorage调用，也可以直接使用localStorage调用。

浏览器关闭，localStorage也不会消失

示例：

  1. <body>
  2.     <h2>localStorage</h2>
  3.     <button onclick="saveData()">点我保存一个数据</button>
  4.     <button onclick="readData()">读取数据</button>
  5.     <button onclick="deleteData()">删除数据</button>
  6.     <button onclick="clearData()">清空数据</button>
  7.     <script>
  8.         function saveData() {
  9.             // 参数1：key，参数2：value
  10.             // key、value都需要是字符串
  11.             // localStorage.setItem('msg', 'hello')
  13.             let person = {name: '张三', age:18}
  14.             localStorage.setItem('person', JSON.stringify(person));
  15.         }
  17.         function readData() {
  18.             let result = localStorage.getItem('person')
  19.             console.log(JSON.parse(result))
  20.         }
  22.         function deleteData() {
  23.             localStorage.removeItem('person');
  24.         }
  26.         function clearData() {
  27.             localStorage.clear();
  28.         }
  29.     </script>
  30. </body>

sessionStorage

用法和localStorage完全一样。

浏览器关闭后，sessionStorage会消失

  1. <body>
  2.     <h2>sessionStorage</h2>
  3.     <button onclick="saveData()">点我保存一个数据</button>
  4.     <button onclick="readData()">读取数据</button>
  5.     <button onclick="deleteData()">删除数据</button>
  6.     <button onclick="clearData()">清空数据</button>
  7.     <script>
  8.         function saveData() {
  9.             // 参数1：key，参数2：value
  10.             // key、value都需要是字符串
  11.             // sessionStorage.setItem('msg', 'hello')
  13.             let person = {name: '张三', age:18}
  14.             sessionStorage.setItem('person', JSON.stringify(person));
  15.         }
  17.         function readData() {
  18.             let result = sessionStorage.getItem('person')
  19.             console.log(JSON.parse(result))
  20.         }
  22.         function deleteData() {
  23.             sessionStorage.removeItem('person');
  24.         }
  26.         function clearData() {
  27.             sessionStorage.clear();
  28.         }
  29.     </script>
  30. </body>

总结

localStorage、sessionStorage统称为webStorage。

存储内容大小一般支持5MB左右（和浏览器有关）。

浏览器通过Window.sessionStorage、Window.localStorage属性实现本地存储机制。

相关API：

  1. xxxStorage.setItem('key', 'value')：该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
  2. xxxStorage.getItem('person')：该方法接收一个键名作为参数，返回键名对应的值
  3. xxxStorage.removeItem('key')：该方法接收一个键名作为参数，并把该键名从存储中删除
  4. xxxStorage.clear()：该方法会清空存储中的所有数据

sessionStorage存储的内容会随着浏览器窗口关闭而消失。

localStorage存储的内容，需要手动清除才会消失（调用相关API、手工清空浏览器的缓存）。

xxxStorage.getItem(xxx)如果键名对应的value获取不到，那么返回值是null。

JSON.parse(null)的结果也是null

使用本地存储来保存vue中的数据

示例：

  1. <script>
  2. import MyHeader from './components/MyHeader'
  3. import MyFooter from './components/MyFooter'
  4. import MyList from './components/MyList'
  6. export default {
  7.   name: 'App',
  8.   components: {MyHeader, MyFooter, MyList},
  9.   data() {
  10.     return {
  12.       // todos初始化时，读取浏览器本地存储的todos，如果没有则设置为[]
  13.       todos: JSON.parse(localStorage.getItem('todos')) || []
  14.     }
  15.   },
  16.   watch: {
  18.     // 使用监视器监视todos的改变，当todos改变时存入本地存储中，浏览器关闭也不会丢失
  19.     todos: {
  20.       handler(value) {
  21.         localStorage.setItem('todos', JSON.stringify(value));
  22.       },
  23.       deep:true
  24.     }
  25.   }
  26. }
  27. </script>