Online Notepad

About Online Notepad

This online notepad provides three specialized modes for different note-taking needs: plain text notes, interactive checklists, and categorized shopping lists. All data is stored locally in your browser using the localStorage API.

localStorage Storage Mechanism

localStorage is a Web Storage API that provides persistent key-value storage in the browser:

Storage Key Structure

// This tool uses namespaced keys to avoid collisions:
const STORAGE_KEYS = {
  notes:     "toolforge.notes-lists.notes",
  checklist: "toolforge.notes-lists.checklist",
  shopping:  "toolforge.notes-lists.shopping"
};

// Save data:
localStorage.setItem(STORAGE_KEYS.notes, textValue);

// Load data:
const saved = localStorage.getItem(STORAGE_KEYS.notes) || "";

// Clear data:
localStorage.removeItem(STORAGE_KEYS.checklist);

// Export all data:
const exportData = {
  notes: localStorage.getItem(STORAGE_KEYS.notes),
  checklist: localStorage.getItem(STORAGE_KEYS.checklist),
  shopping: localStorage.getItem(STORAGE_KEYS.shopping)
};

Checklist Format Specification

Each line represents one task item. The format is simple plain text:

Input (one item per line):
Buy milk
Send email to team
Pack charger
Call dentist

Rendered Output:
☐ Buy milk
☐ Send email to team
☐ Pack charger
☐ Call dentist

Shopping List Category Format

Use pipe character (|) to separate category from item name:

Input Format:
Category|Item Name

Example Input:
Produce|Apples
Produce|Bananas
Dairy|Milk
Dairy|Eggs
Meat|Chicken
Other|Paper towels

Rendered Output:
Produce
- Apples
- Bananas

Dairy
- Milk
- Eggs

Meat
- Chicken

Other
- Paper towels

Mode Comparison

Rendering Algorithm

// Notes rendering - preserves whitespace
function renderNotes(value) {
  if (!value) return '
No notes yet.
';
  return '
' +
         escapeHtml(value) +
         '
';
}

// Checklist rendering - creates interactive checkboxes
function renderChecklist(value) {
  const lines = value.split(/\r?\n/)
    .map(line => line.trim())
    .filter(Boolean);

  if (!lines.length) return '
No checklist items yet.
';

  return lines.map(item =>
    '' +
    ' ' +
    escapeHtml(item) +
    ''
  ).join('');
}

// Shopping list rendering - groups by category
function renderShopping(value) {
  const groups = {};

  value.split(/\r?\n/)
    .map(line => line.trim())
    .filter(Boolean)
    .forEach(line => {
      const parts = line.split('|');
      const group = parts.length > 1 ? (parts[0] || 'Other').trim() : 'Other';
      const item = parts.length > 1 ? parts.slice(1).join('|') : parts[0] || '';

      if (!groups[group]) groups[group] = [];
      groups[group].push(item.trim());
    });

  const keys = Object.keys(groups);
  if (!keys.length) return '
No shopping items yet.
';

  return '
' + keys.map(group =>
    group + '\n- ' + groups[group].join('\n- ')
  ).join('\n\n') + '
';
}

// HTML escape for XSS prevention
function escapeHtml(value) {
  return value
    .replace(/&/g, '&')
    .replace(//g, '>');
}

Browser Storage Comparison

Data Export and Backup

Since data is stored locally in the browser, consider these practices for data portability:

• Manual Copy: Regularly copy important notes to a separate file
• Copy Output: Use the Copy Output button to export rendered content
• Browser Console: Access localStorage directly via developer tools
• Browser Sync: Some browsers sync localStorage across devices
• Export Script: Use console to extract all data as JSON

// Export all ToolForge data from browser console:
const data = {};
const prefix = 'toolforge.notes-lists.';
['notes', 'checklist', 'shopping'].forEach(mode => {
  data[mode] = localStorage.getItem(prefix + mode);
});
console.log(JSON.stringify(data, null, 2));
// Copy the output and save as JSON file

Common Use Cases

• Quick Notes: Temporary scratchpad for phone numbers, URLs, or reminders
• Task Checklist: Daily tasks, packing lists, procedure steps
• Shopping Lists: Organized by store sections for efficient shopping
• Meeting Notes: Quick capture during calls with render for review
• Code Snippets: Temporary storage for code fragments being worked on
• Brainstorming: Rapid idea capture without app overhead

Security Considerations