0xVantrex / 0xVantrex/DevHub-JS
Build LocalStorage persistence (js/storage.js)
- 主要言語
- HTML
- スター
- 0
- フォーク
- 0
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
Goal
Ensure all profiles (added, edited, or deleted) are saved automatically and loaded again when the page reloads — no data loss.
File Ownership
You fully own:
/js/storage.js
Only you touch this file. You create all functions related to saving and loading profiles.
Learning Concepts
JSON.stringify() and JSON.parse()
Browser localStorage API
Exporting and importing JS functions
Code modularization and function reusability
Functional Requirements
1. Create saveProfiles(profilesArray)
This function receives the current list of profiles (an array of objects) and saves it to localStorage.
function saveProfiles(profilesArray) {
localStorage.setItem("profiles", JSON.stringify(profilesArray));
}
Every time a profile is added, edited, or deleted — other modules will call this function to update storage.
2. Create loadProfiles()
This function loads the saved profiles from localStorage when the app starts.
Steps:
Get the stored item:
const storedData = localStorage.getItem("profiles");
If data exists, parse and return it:
if (storedData) {
return JSON.parse(storedData);
}
Otherwise, return an empty array:
return [];
Final version:
function loadProfiles() {
const storedData = localStorage.getItem("profiles");
return storedData ? JSON.parse(storedData) : [];
}
3. Export Both Functions
export { saveProfiles, loadProfiles };
4. Integration Example
In app.js or profiles.js, teammates will call your functions like this:
When App Starts
import { loadProfiles } from "./storage.js";
let profiles = loadProfiles();
When Profiles Are Updated
import { saveProfiles } from "./storage.js";
saveProfiles(profiles);
Definition of Done
Profiles persist even after page reload.
saveProfiles() and loadProfiles() work without breaking anything.
No duplication or undefined data.
No console errors.
Code is modular, clear, and fully commented.
(Optional)
Add a timestamp when saving (e.g., lastSaved: new Date()).
Log in console when saving/loading occurs for debugging.
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
調査の方向性
The work is isolated to /js/storage.js. Start by creating the file and implementing the saveProfiles and loadProfiles functions as described. Test by integrating them into app.js or profiles.js to ensure profiles persist across page reloads. Check for console errors and verify data is saved and loaded correctly using the browser's developer tools.
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript
- 領域
- frontend
- issue の種類
- 機能追加
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 活発さ
- 停滞
- 明瞭さ
- 明確に書かれている
- 初心者へのやさしさ
- 75/100