自定义LocalStorage类报错：getLocalStorage is not a function求助

问题根源 #

你自定义的LocalStorage类里的getLocalStorage和setLocalStorage是实例方法，必须先创建类的实例才能调用，而你现在直接用类名LocalStorage去调用，自然会报错。另外代码里还存在存储key不统一的问题（一会儿用'book'，一会儿用'books'），这也会导致数据读取异常。

修复步骤及代码修改 #

1. 创建LocalStorage类的实例

在导入LocalStorage后，先初始化一个实例，指定统一的存储key：

import LocalStorage from './你的LocalStorage文件路径.js';

// 创建实例，统一用'books'作为存储key
const storage = new LocalStorage('books');

2. 修改SaveAll类的save方法

把直接调用类方法改成调用实例的方法，同时统一key：

class SaveAll {
  save = (title, author) => {
    let books = [];
    // 调用实例的getLocalStorage方法
    const storedBooks = storage.getLocalStorage();
    // 如果读取到数据就用，否则设为空数组
    books = storedBooks || [];

    const book = { text1: title, text2: author };
    books.push(book);
    // 调用实例的setLocalStorage方法
    storage.setLocalStorage(books);
  }
}

3. 优化renderBooks方法（保持代码一致性）

把直接操作原生localStorage的代码改成用自定义的实例：

static renderBooks = () => {
  bookText.innerHTML = '';
  // 用实例读取数据
  const books = storage.getLocalStorage() || [];

  books.forEach((book) => {
    bookText.innerHTML += `
      <div class="wrapper">
        <p class="book-title">${book.text1}</p>
        <p class="book-author">${book.text2}</p>
        <button onclick="deleteBook('${book.text1}', '${book.text2}')">Remove</button>
      </div>
    `;
  });
}

额外说明 #

• 实例方法和静态方法的区别：静态方法是挂在类本身的（用static关键字定义），可以直接用类名调用；而你写的箭头函数方法是属于每个类实例的，必须先new出实例才能调用。
• 统一存储key很重要，否则会出现存了数据但读不到的情况，这里统一用'books'即可。

内容的提问来源于stack exchange，提问作者Kennedy Owusu