5.6 Vue中的localStorage和sessionStorage浏览器端数据存储机制

目录

一、 localStorage

1. localStorge概述

在 Vue 中，localStorage 是一种用于浏览器端数据存储的机制，它可以让你把数据存储在客户端本地。

localStorage 是一个 JavaScript 对象，其中每个键值对都是一个字符串。存储的数据可以根据键进行获取，也可以进行修改或删除。由于是在客户端本地存储数据，所以即使页面被刷新或关闭，数据仍然可以被保留。

Vue 组件中使用 localStorage 时，可以将数据存储在 created 或 mounted 钩子函数中，并在以后的使用中进行获取和修改。

例如，一个简单的数据存储示例：

<template>
  <div>
    <button @click="incrementCounter">Click me</button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        counter: 0
      }
    },
    created() {
      // 获取本地存储的计数器值，如果不存在则默认为 0
      this.counter = parseInt(localStorage.getItem('counter')) || 0;
    },
    methods: {
      incrementCounter() {
        // 增加计数器的值并存储到本地
        this.counter++;
        localStorage.setItem('counter', this.counter.toString());
      }
    }
  }
</script>

在这个示例中，创建了一个简单的计数器，每当按钮被点击时，计数器的值就会增加。该组件在 created 钩子函数中获取了本地存储的计数器值，并在 incrementCounter 方法中更新计数器的值并保存到本地存储。这样，无论何时用户关闭或刷新页面，计数器的值都会被保留。

2. localStorage的函数及使用示例

Vue.js 提供了在浏览器中使用本地存储的 API，也就是本地存储(Local Storage)。通过该 API 可以将数据保存在用户的本地浏览器中，即使访问该网站的用户关闭浏览器，数据仍会被保存。

可以通过以下步骤来使用 localStorage:

1. 将数据存储到浏览器的 localStorage 中：

localStorage.setItem(key, value);

其中 key 是键名，value 是键值。注意，value 必须是字符串，如果是对象或者数组等其他类型的值，需要先将其转换为字符串。

2. 从本地存储中获取数据：

localStorage.getItem(key);

其中 key 是要获取数据的键名。如果键名不存在，则返回 null。

3. 从本地存储中删除数据：

localStorage.removeItem(key);

其中 key 是要删除的键名。

4. 从本地存储中删除所有数据：

localStorage.clear();

请注意，虽然 localStorage 中存储的数据不会随用户的关闭而丢失，但是这些数据是可以被浏览器和其他 JavaScript 应用程序访问和修改的。因此，请务必谨慎使用 localStorage 存储敏感数据。

二、 sessionStorage

1. sessionStorage概述

当我们需要将一些临时数据存储到浏览器中，可以使用sessionStorage。
sessionStorage对象是Window对象的一个只读属性，在同一窗口或标签页(session)中始终存在，当窗口或标签页被关闭后，保存在其中的数据将被清除。
Vue.js 中的 sessionStorage 是 HTML5 Web Storage API 的一种实现，它允许浏览器在客户端本地存储键值对来持久化数据。

例如，一个简单的数据存储示例：

<template>
  <div>
    <h2>{{message}}</h2>
    <button @click="saveData">保存数据</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: '欢迎使用Vue.js'
    }
  },

  methods: {
    saveData () {
      sessionStorage.setItem('message', this.message);
      alert('数据已保存到sessionStorage中');
    }
  },

  mounted () {
    if (sessionStorage.getItem('message')) {
      this.message = sessionStorage.getItem('message');
    }
  }
}
</script>

在上面的代码中，使用了sessionStorage.setItem()方法将数据保存到sessionStorage中。
在mounted()函数中，使用了sessionStorage.getItem()方法获取保存在sessionStorage中的数据，然后更新了message的值。
这样，在刷新页面或重新打开标签页时，仍然可以保留之前保存的数据。

2. sessionStorage的函数及使用示例

可以通过以下步骤来使用 sessionStorage:

1. setItem(key, value): 将键值对添加到 sessionStorage 中。

sessionStorage.setItem('name', 'Tom');

2. getItem(key): 从 sessionStorage 中获取指定键对应的值。

var name = sessionStorage.getItem('name');
console.log(name); // 输出 'Tom'

3. removeItem(key): 从 sessionStorage 中删除指定键的值。

sessionStorage.removeItem('name');

其中 key 是要删除的键名。

4. clear(): 删除 sessionStorage 中的所有键值对。

sessionStorage.clear();

三、 sessionStorage与localstorge的区别

1. 生命周期

sessionStorage的生命周期为当前会话，即仅在当前浏览器窗口关闭之前有效；
而localStorage的生命周期为永久，即除非用户手动清除或浏览器清除缓存，否则数据会一直保存在本地。

2. 存储大小

localStorage的存储大小一般为5MB，
而sessionStorage通常为5-10MB。

3. 作用域

sessionStorage的作用域是在当前浏览器窗口，不同的浏览器窗口之间数据互不干扰；
而localStorage的作用域为同一域名下的所有窗口共享。

由于这些差异，当我们需要在浏览器端存储数据时，应该根据实际需求选择合适的存储方式。