J*aScript备忘录模式_状态持久化方案

class Editor {
  constructor() {
    this.content = '';
  }
<p>// 设置内容
setContent(content) {
this.content = content;
}</p><p>// 获取当前状态（创建备忘录）
s*e() {
return new EditorMemento(this.content);
}</p><p>// 恢复到指定状态
restore(memento) {
this.content = memento.getContent();
}</p><p>getContent() {
return this.content;
}
}</p><p>class EditorMemento {
constructor(content) {
this.content = content;
}</p><p>getContent() {
return this.content;
}
}</p><p>class History {
constructor() {
this.states = [];
}</p><p>push(state) {
this.states.push(state);
}</p><p>pop() {
return this.states.pop();
}
}</p>

const editor = new Editor();
const history = new History();
<p>editor.setContent("第一版内容");
history.push(editor.s*e());</p><p>editor.setContent("第二版内容");
history.push(editor.s*e());</p><p>editor.setContent("第三版内容");</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1084">
                            <img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6c8f303e59213.png" alt="Kreado AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1084">Kreado AI</a>
                            <p>Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。 为创作者提供AI赋能</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Kreado AI">
                                <span>182</span>
                            </div>
                        </div>
                        <a href="/ai/1084" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Kreado AI">
                        </a>
                    </div>
                <p>// 撤销一次
editor.restore(history.pop());
console.log(editor.getContent()); // 输出: 第二版内容</p><p>// 再撤销一次
editor.restore(history.pop());
console.log(editor.getContent()); // 输出: 第一版内容</p>

class PersistentEditor {
  constructor(key) {
    this.content = '';
    this.key = key; // 存储键名
    this.loadFromStorage(); // 初始化时加载
  }
<p>setContent(content) {
this.content = content;
}</p><p>s*e() {
const states = this.getS*edStates();
states.push({ content: this.content, timestamp: Date.now() });
localStorage.setItem(this.key, JSON.stringify(states));
return new EditorMemento(this.content);
}</p><p>getS*edStates() {
const data = localStorage.getItem(this.key);
return data ? JSON.parse(data) : [];
}</p><p>loadFromStorage() {
const states = this.getS*edStates();
if (states.length > 0) {
this.content = states[states.length - 1].content;
}
}</p><p>restoreLast() {
const states = this.getS*edStates();
if (states.length < 2) return;
states.pop(); // 移除当前
const previous = states[states.length - 1];
this.content = previous.content;
localStorage.setItem(this.key, JSON.stringify(states));
}
}</p>