怎么通过HTML5中LocalStorage实现网页版抽奖系统的奖品名称本地配置-H5教程-PHP中文网

可直接用 localstorage 存储奖品列表（json格式），页面加载时读取，抽奖时随机抽取并更新显示——无需后端，配置灵活，刷新不丢失。

怎么通过html5中localstorage实现网页版抽奖系统的奖品名称本地配置

可以直接用 localStorage 存储奖品列表（JSON格式），页面加载时读取，抽奖时随机抽取并更新显示——无需后端，配置灵活，刷新不丢失。

奖品数据结构设计

推荐用数组形式存储，每项包含名称、权重（可选）、是否禁用等字段，便于后续扩展。例如：

[
  {"name": "一等奖", "weight": 10, "enabled": true},
  {"name": "二等奖", "weight": 30, "enabled": true},
  {"name": "安慰奖", "weight": 60, "enabled": true}
]

权重用于加权随机抽奖；enabled 字段支持临时下架某奖项。

初始化与保存奖品配置

首次访问或管理员修改后，调用以下代码写入本地：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

function savePrizes(prizeList) {
  localStorage.setItem('lotteryPrizes', JSON.stringify(prizeList));
}
// 示例：设置默认奖品
savePrizes([
  {name: "iPhone 15", enabled: true},
  {name: "AirPods", enabled: true},
  {name: "谢谢参与", enabled: true}
]);

务必用 JSON.stringify() 转为字符串再存，否则会变成 [object Object]
建议封装成函数，方便在控制台或配置界面调用
可配合 prompt() 或表单输入，让运营人员手动更新（简易版）

页面加载时读取并渲染奖品

在 <script></script> 中执行：

function loadPrizes() {
  const data = localStorage.getItem('lotteryPrizes');
  return data ? JSON.parse(data) : [];
}
const prizes = loadPrizes();
// 可选：动态生成配置预览（如显示在页面底部）
document.getElementById('prize-list').innerHTML = 
  prizes.map(p => `<div>${p.name} ${p.enabled ? '✅' : '❌'}</div>`).join('');

始终做空值判断，避免解析失败报错
读取后可直接用于抽奖逻辑，也可渲染到管理区域供核对
若需实时生效，可在抽奖按钮点击前重新读取一次

抽奖时使用本地配置

从 loadPrizes() 获取当前有效奖品（过滤 enabled: true），再随机选取：

function drawPrize() {
  const activePrizes = loadPrizes().filter(p => p.enabled);
  if (activePrizes.length === 0) return '暂无可用奖品';
  const randomIndex = Math.floor(Math.random() * activePrizes.length);
  return activePrizes[randomIndex].name;
}
// 点击抽奖按钮触发
document.getElementById('draw-btn').onclick = () => {
  const result = drawPrize();
  document.getElementById('result').textContent = result;
};