[猫头虎分享21天微信小程序基础入门教程] 第14天：小程序的数据存储与本地缓存

wx.setStorageSync('key', 'value');
wx.setStorageSync('user', { username: '猫头虎', age: 30 });

const value = wx.getStorageSync('key');
const user = wx.getStorageSync('user');
console.log(value); // 输出: value
console.log(user); // 输出: { username: '猫头虎', age: 30 }

wx.removeStorageSync('key');

wx.clearStorageSync();

wx.setStorage({
  key: 'key',
  data: 'value',
  success() {
    console.log('数据存储成功');
  },
  fail(err) {
    console.error('数据存储失败:', err);
  }
});

wx.getStorage({
  key: 'key',
  success(res) {
    console.log('获取数据成功:', res.data);
  },
  fail(err) {
    console.error('获取数据失败:', err);
  }
});

// 用户登录后存储登录状态
wx.setStorageSync('isLoggedIn', true);

const isLoggedIn = wx.getStorageSync('isLoggedIn');
if (isLoggedIn) {
  console.log('用户已登录');
} else {
  console.log('用户未登录');
}

wx.setStorageSync('theme', 'dark');

const theme = wx.getStorageSync('theme');
console.log('当前主题:', theme); // 输出: 当前主题: dark

<view class="container">
  <input placeholder="请输入备忘录" bindinput="handleInput" value="{{memo}}" />
  <button bindtap="addMemo">添加</button>
  <view class="memo-list">
    <block wx:for="{{memos}}" wx:key="index">
      <view class="memo-item">
        <text>{{item}}</text>
        <button bindtap="removeMemo" data-index="{{index}}">删除</button>
      </view>
    </block>
  </view>
</view>

.container {
  padding: 20rpx;
}
.memo-list {
  margin-top: 20rpx;
}
.memo-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  padding: 10rpx;
  border: 1px solid #ccc;
}

Page({
  data: {
    memo: '',
    memos: []
  },
  onLoad() {
    this.loadMemos();
  },
  handleInput(e) {
    this.setData({ memo: e.detail.value });
  },
  addMemo() {
    if (!this.data.memo) return;
    const memos = this.data.memos.concat(this.data.memo);
    this.setData({ memos, memo: '' });
    wx.setStorageSync('memos', memos);
  },
  removeMemo(e) {
    const index = e.currentTarget.dataset.index;
    const memos = this.data.memos.filter((_, i) => i !== index);
    this.setData({ memos });
    wx.setStorageSync('memos', memos);
  },
  loadMemos() {
    const memos = wx.getStorageSync('memos') || [];
    this.setData({ memos });
  }
});