Jieun hiji Daptar Editable Ka-Do Ku Contenteditable

Eusi Editable ngajadikeun paling raos mun anjeun masangkeun eta kalawan gudang lokal, kitu eusi persists antara sesi sarta kunjungan situs.

1. Buka halaman anjeun dina hiji redaksi HTML.
2. Jieun bulleted, daftar unordered ngaranna myTasks:

   
   
   • Sababaraha tugas
     
   • tugas sejen
     

1. Nambah atribut contenteditable kana
   unsur:
   Ayeuna boga daftar ka-do nyaéta editable-tapi lamun nutup panyungsi anjeun atawa ninggalkeun kaca, daftar anjeun bakal ngaleungit. Leyuran: Tambahkeun a Aksara basajan pikeun ngahemat tugas ka localStorage.
   • Tambahkeun tumbu ka jQuery dina tina dokumen Anjeun.
     Contona kieu ngagunakeun Google CDN, tapi anjeun bisa boga imah eta diri atanapi nganggo CDN sejen lamun resep.

1. Di handap kaca anjeun, ngan luhureun tag, tambahkeun Aksara anjeun:

   
   $ (Document.ready (fungsi () {
   });

   Ieu mimiti tina fungsi document.ready jQuery sarta ngabejaan browser pikeun muka naskah sanggeus dokumen geus dieusian pinuh.
2. Jero éta fungsi document.ready, tambahkeun Aksara Anjeun pikeun muka tugas kana localStorage tur meunang sagala pancén nya éta disimpen aya samemehna:

   $ (Document.ready (fungsi () {
   $ ( "# myTasks"). blur (fungsi () {// lamun kursor daun unsur #myTasks
   localStorage.setItem ( 'myTasksData', this.innerHTML); // simpen keur localStorage
   });
   lamun (localStorage.getItem ( 'myTasksData')) {// lamun aya eusi dina localStorage nu
   $ ( "# myTasks") html (localStorage.getItem ( 'myTasksData')).; // nempatkeun eusi dina kaca
   }});

The HTML pikeun sakabéh kaca Sigana mah ieu:

Tugas abdi

Tugas abdi

Lebetkeun item pikeun daptar Anjeun. browser bakal nyimpen eta keur anjeun, ku kituna lamun Anjeun reopen panyungsi anjeun, éta baris tetep jadi di dieu.

• Sababaraha tugas
  
• tugas sejen
  
  
  $ (Dokumen) .ready (fungsi () {
  $ ( "# MyTasks"). Blur (fungsi () {
  localStorage.setItem ( 'myTasksData', this.innerHTML);
  });
  lamun (localStorage.getItem ( 'myTasksData')) {
  $ ( "# MyTasks") html (localStorage.getItem ( 'myTasksData')).;
  }
  });