Vue客户端存储

最新推荐文章于 2024-02-04 09:32:29 发布

原创

最新推荐文章于 2024-02-04 09:32:29 发布 · 711 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了Vue中客户端存储的概念，强调了Local Storage在存储用户偏好和表单数据时的作用。文章提供了一个小案例，展示了如何在刷新浏览器后仍能保留数据，并详细解释了如何使用JSON进行数据序列化和反序列化。同时提到了mounted方法在加载持久化数据中的应用，以及localStorage的方法如getItem、setItem和removeItem。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户端存储

关于客户端存储：通过把数据存储在浏览器中，用户不必每次都向服务器请求获取同一个信息。离线时，使用本地存储的数据而不是向远端服务器上请求数据就显得非常有用。

Local Storage 适合存储你希望进行持久化的较小数据集，比如用户偏好设置或表单数据。

注意：存储对象和数组这样更复杂的数据，必须使用 JSON 来对数据进行序列化和反序列化。

太多废话了直接正题
在这里插入图片描述

我是一个小案例：

<template>
   <div class="tab">
   <h2>便签</h2> 
    <p>
      <input v-model="newValue" placeholder="请输入...">
      <button @click="addTab">AddTab</button>
   </p>
   <ul>
      <li v-for="(value, key) in items">
         <span>{
  
  { value }}</span> 
         <button @click="removeTab(key)">RemoveTab</button>
      </li>
   </ul>
  
   </div>
</template>
<script>
export default {
   data(){
      return {
         items:[],
         newValue:null