Alpine.JS 刷新后如何保存动态数据

问：

我做了一个下拉列表，单击后显示下面的结果。但是，我似乎无法弄清楚刷新后如何保留数据。如果我添加十个不同的名称，如果我刷新浏览器，我必须重新开始。任何帮助将不胜感激。

我的 HTML：

  <div x-data="addRemove()">
     <form x-on:submit.stop.prevent="addRemoveSubmit">
          <!-- The dropdown itself is a Larvel component -->
          <select x-model="newLast" id="last" 
               wire:model="Customer_Name">
               <option value="" selected>Assign Student</option>
                      @foreach($posts as $post)
                          <option  value="{{ $post->First_Name }} {{ 
                          $post->Last_Name }}" name="Customer_Name">
                              {{ $post->First_Name }} {{ $post- 
                           >Last_Name }}</option>
                          <br>     
                      @endforeach
          <button type="submit">Add Student</button>
                  <template x-for="(person, index) in 
                   Object.values(persons)" 
                  :key="index">
                      <tr>
                          <div><td x-text="person.last"></td>
                      </tr>
                  </template> 
     </form>
</div>

我的javascript：

function addRemove() {
return { 
  newFirst: '', 
  newLast: '',
  // This makes page null after refresh 
  persons: '',
  addRemoveSubmit() {
    this.persons = [].concat({ 
      first: this.newFirst, 
      last: this.newLast
    }, this.persons);
  }
}
}