您现在的位置是:首页 >技术杂谈 >5.6 Vue中的localStorage和sessionStorage浏览器端数据存储机制网站首页技术杂谈

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

ibun.song 2023-06-16 08:00:02
简介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 必须是字符串,如果是对象或者数组等其他类型的值,需要先将其转换为字符串。

  1. 从本地存储中获取数据:
localStorage.getItem(key);

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

  1. 从本地存储中删除数据:
localStorage.removeItem(key);

其中 key 是要删除的键名。

  1. 从本地存储中删除所有数据:
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');
  1. getItem(key): 从 sessionStorage 中获取指定键对应的值。
var name = sessionStorage.getItem('name');
console.log(name); // 输出 'Tom'
  1. removeItem(key): 从 sessionStorage 中删除指定键的值。
sessionStorage.removeItem('name');

其中 key 是要删除的键名。

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

三、 sessionStorage与localstorge的区别

1. 生命周期

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

2. 存储大小

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

3. 作用域

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

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

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。