Энэ бол нэлээд стандарт HTML контейнер бөгөөд бидний JavaScript-ийн тусламжтайгаар бид бүгдийг динамик контентоор дүүргэж чадна.

Бид энэ жишээнд jQuery-г ашиглах тул та үүнийг HTML баримт бичигт оруулах шаардлагатай болно.

JavaScript

Хэрэв бид энгийн "хийх ажлын жагсаалт" програмын бүтцийн талаар бодох юм бол хэрэглэгч "нэмэх" эсвэл "шалгах" товчийг дарахад оролт хоосон утгатай эсэхийг шалгах хэрэгтэй.

$("#add").click(function() ( var Description = $("#description").val(); //хэрэв хийх ажил хоосон байвал if($("#description").val( ) == "") ( $("# alert").html(" Анхааруулга!Та хийх ажлыг хоосон орхисон"); $("#alert").fadeIn().delay(1000).fadeOut(); худал буцаана; )

Бидний хийсэн зүйл бол "Нэмэх" товчийг дарж, хэрэглэгч ямар нэгэн зүйлээр оруулгыг бөглөсөн эсэхийг шалгах энгийн тестийг ажиллуулах явдал байв. Үгүй бол дохиолол гарч ирэх ба 1000 мс байх ба дараа нь алга болно.

Бидний хийх дараагийн зүйл бол жагсаалтын утгыг оруулах мөрөнд оруулах бөгөөд бид үүнийг өмнө нь бичих бөгөөд ингэснээр хэрэглэгч даалгавар нэмэх үед энэ нь үргэлж жагсаалтын эхэнд гарч, дараа нь локал хадгалах санд байгаа зүйлсийг жагсаах, жишээ нь:

// жагсаалтын зүйл нэмэх $("#todos").prepend("

Таны харж байгаагаар энэ бол нэлээд стандарт jQuery бөгөөд дотоод санах ойн хувьд бид түлхүүр болон утгыг хадгалах ёстой. Түлхүүр нь бид өөрсдөдөө өгөх нэр бөгөөд энэ тохиолдолд бид үүнийг зүгээр л "Todos" гэж нэрлэх бөгөөд дараа нь бид юу хадгалахыг хүсч байгаагаа тодорхойлох ёстой бөгөөд энэ тохиолдолд эрэмблэгдээгүй жагсаалтын Todos дотор байгаа бүх HTML байна. Таны харж байгаагаар бид jQuery-ээр бүх зүйлийг барьж аваад эцэст нь "худал" (худал) гэж буцаасан бөгөөд ингэснээр маягт бууж өгөхгүй, хуудас маань дахин сэргэхгүй.

Бидний дараагийн алхам бол дотооддоо хадгалсан зүйл байгаа эсэхийг шалгах явдал юм. Хэрэв байгаа бол бид түлхүүрээ "todos" гэж нэрлэсэн тул үүнийг хуудсан дээр байрлуулах хэрэгтэй. Үүн шиг:

// хэрэв бидэнд дотоод хадгалах газар байгаа бол if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

Хэрэв та манай програмыг туршиж үзээд хуудсыг дахин ачаалвал аль хэдийн ажиллаж байгааг харах болно. Бидний хийх ёстой зүйл бол жагсаалтыг бүхэлд нь арилгах үүрэгтэй функцийг бий болгох явдал юм. Бид бүх дотоод санах ойг устгаж, өөрчлөлтийг хүчин төгөлдөр болгохын тулд хуудсыг дахин ачаалсны дараа URL-н өмнөх хэшээс сэргийлэхийн тулд "худал" гэж буцаана:

// бүх дотоод санах ойг арилгах $("#clear").click(function() ( window.localStorage.clear(); location.reload(); худал буцах; ));

Бүрэн коддараах байдлаар:

$("#add").click(function() ( var Тодорхойлолт = $("#description").val(); if($("#description").val() == "") ( $( "# alert").html(" Анхааруулга!Та хийх ажлыг хоосон орхисон"); $("#alert").fadeIn().delay(1000).fadeOut(); false буцаах; ) $("#todos").prepend("

Хөтөчийн дэмжлэг

Web Storage-ийн дэмжлэг нь HTML5-ийн хувьд маш сайн бөгөөд үүнийг бүх гол хөтчүүд, тэр байтугай IE8 дэмждэг.

Бидний өмнөх зааварт авч үзсэн күүки маш хязгаарлагдмал: нэг күүки зөвхөн 4096 тэмдэгттэй байж болох ба нэг домэйн дэх күүкиний тоо хөтөчөөс хамааран 30-50 орчим байж болно. Тиймээс харамсалтай нь тэнд маш их мэдээлэл хадгалах боломжгүй болно. Түүхэнд ийм л байсан.

Энэ хязгаарлалтыг даван туулахын тулд хөтчүүдэд күүки-ээс өөр хувилбар байдаг - үүнийг дотоод санах ой гэж нэрлэдэг. Орон нутгийн санах ойд бид 5-10 мегабайт эсвэл түүнээс ч их хэмжээний мэдээллийг удаан хугацаагаар хадгалах боломжтой.

Орон нутгийн хадгалах сантай ажиллах

Дотоод санах ойтой ажиллахын тулд хөтөч дээр суулгасан localStorage объектыг ашиглахыг зорьсон. Энэ нь ойлгоход хялбар 4 аргатай. Тэд энд байна:

//Утгыг хадгалж байна: localStorage.setItem("Түлхүүр", "Утга"); //Утгыг авч байна: var value = localStorage.getItem("Түлхүүр"); //Устгах утгыг: localStorage.removeItem("Түлхүүр"); //Бүх санах ойг арилгах: localStorage.clear();

FROM орон нутгийн хадгалах санТа ердийн массивтай адил ажиллах боломжтой:

//Утгыг хадгалж байна: localStorage["Key"] = "Утга"; //Утгыг авч байна: var value = localStorage["Key"]; //Утгыг устгаж байна: localStorage устгах["Түлхүүр"];

Объектоос бусад орон нутгийн хадгалах санобъект бас бий sessionStorage. Түүнтэй ажиллах нь ижил аргаар хийгддэг бөгөөд цорын ганц ялгаа нь сайтын хөтөч эсвэл табыг хаасны дараа бүх өгөгдөл автоматаар устгагдана. За, localStorage нь өгөгдлийг скриптээр устгах хүртэл эсвэл хөтөчийн хэрэглэгч тохиргоог ашиглан дотоод санах ойг цэвэрлэх хүртэл өгөгдлийг удаан хугацаанд хадгалдаг.

Жишээ

Дараах жишээнд бид хэрэглэгчийн нэрийг дотоод санах ойд бичих болно.

LocalStorage.setItem("нэр", "Жон");

Хэсэг хугацааны дараа бид энэ нэрийг буцааж авах болно:

Анхааруулга(localStorage.getItem("нэр"));

Таны харж байгаагаар энд ямар ч төвөгтэй зүйл байхгүй, бүх зүйл жигнэмэгтэй ижил ажил хийхээс хамаагүй хялбар юм.

Объектуудыг хадгалах

Орон нутгийн хадгалалт нь объектуудыг хадгалах чадваргүй бөгөөд JavaScript массивуудХэдийгээр энэ нь ихэвчлэн тохиромжтой байдаг. Гэхдээ нэг арга бий - та энэ өгөгдлийг JSON формат руу цуваа болгох хэрэгтэй - та аль хэдийн localStorage-д хадгалах боломжтой мөрийг авах болно. Дараа нь бид энэ объектыг буцааж авах шаардлагатай үед JSON-ийн мөрийг буцааж объект болгон хувиргаж, үүнийг тайван ашиглана.

Энэ үйл явцыг жишээгээр харцгаая. Объектыг цуваа болгож, дотоод санах ойд хадгална уу:

//Өгөгдсөн объект: var obj = (нэр: "Иван", arr: ); //Үүнийг "("нэр": "John", "arr": )" болгож цуваа болгоно: var json = JSON.stringify(obj); //localStorage руу obj түлхүүрээр бичих: localStorage.setItem("obj", json);

Хэсэг хугацааны дараа бид объектыг буцааж авна:

//localStorage-с өгөгдлийг JSON хэлбэрээр буцааж авах: var json = localStorage.getItem("obj"); //Тэдгээрийг буцаан JavaScript объект руу хөрвүүлэх: var obj = JSON.parse(json); консолын бүртгэл (obj);

Нэмэлт функцууд

Хадгалалтанд байгаа бичлэгийн тоог тодорхойлох: alert(localStorage.length).

Түлхүүрийн нэрийг дугаараар нь тодорхойлох: alert(localStorage.key(тоо)).

Хадгалах үйлдлийг гүйцэтгэх үед үйл явдал идэвхждэг агуулах. Хэрэв та энэ үйл явдалд функцийг холбовол дараах шинж чанаруудтай Event объект үүнд бэлэн болно:

function func(event) ( var key = event.key; //хувиргах өгөгдлийн түлхүүр var oldValue = event.oldValue; //old value var newValue = event.newValue; //шинэ утга var storageArea = event.storageArea; // хадгалах талбай)

Нэмэх. материал

Массивыг дотоод санах ойд хадгалах: https://youtu.be/sYUILPMnrIo

Та дараа нь юу хийх вэ:

Дараах холбоосоор асуудлыг шийдэж эхлээрэй: хичээлийн даалгавар.

Бүх зүйл шийдсэний дараа - шинэ сэдвийг судлах руу яв.

• Хичээл #
  youtube дээрх тоглуулах жагсаалт
  ES6-ийн практик хэрэглээ

Энэ зааварт бид ES6-г бүгдийг нь авч үзээгүй тул зарим видеонууд өөрсдөөсөө түрүүлж магадгүй юм. Эдгээр видеог алгасаад дараа нь үзээрэй.

Хөтөч дээрх HTML5 LocalStorage-ийн тухай өгүүллэгийг илгээсэн. Түүнд үг хэлье.

Би localStorage технологийг ашиглах хамгийн энгийн бөгөөд ойлгомжтой гарын авлагыг бичихийг хичээсэн. Технологи өөрөө болон түүнтэй ажиллах хэрэгсэл нь ямар ч төвөгтэй зүйл агуулаагүй тул нийтлэл нь нэлээд жижиг байсан. Эхлэхийн тулд та JavaScript-ийг бага зэрэг мэдэх хэрэгтэй. Тиймээс, энэ нийтлэлд 10 минут өг, тэгвэл та "Би localStorage-тэй хэрхэн ажиллахаа мэднэ" гэсэн мөрийг анкетаа аюулгүйгээр нэмж болно.

LocalStorage гэж юу вэ?

JavaScript объект иймэрхүү харагдаж байна:

Var myCar = ( дугуй: 4, хаалга: 4, хөдөлгүүр: 1, нэр: "Жагуар" )

JSON иймэрхүү харагдаж байна. Ердийн js объекттой бараг ижил, зөвхөн бүх шинж чанаруудыг хашилтанд оруулах ёстой.

( "нэр": "Иван", "овог нэр": "Иванов", "хаяг": ( "гудамжны хаяг": "Московское ш., 101, кв.101", "хот": "Ленинград", "шуудан код": 101101 ), "утасны дугаар": [ "812 123-1234", "916 123-4567" ] )

LocalStorage гэж юу болохыг ойлгохын тулд таны хөтөчийн хаа нэгтээ бидний ашиглаж болох объект байна гэж төсөөлөөд үз дээ. Үүний зэрэгцээ, энэ объект нь хуудсыг дахин ачаалах эсвэл хөтчийг бүрмөсөн хаасан тохиолдолд бидний бичсэн утгыг арилгахгүй.

JavaScript хэлээр ярихад localStorage нь хөтчийн (цонх) глобал объектын өмч юм. Үүнийг window.localStorage эсвэл зүгээр л localStorage хэлбэрээр ашиглах боломжтой.

Хөтөч нь sessionStorage гэж нэрлэгддэг localStorage-ийн клонтой гэдгийг дурдах нь зүйтэй. Тэдний цорын ганц ялгаа нь сүүлийнх нь зөвхөн нэг табын (сесс) өгөгдлийг хадгалдаг бөгөөд бид табыг хаамагц түүний зайг зүгээр л цэвэрлэх болно.

Түүнийг амьдаар нь харцгаая. Жишээлбэл, in Гүүгл КромТа DevTools (F12) нээх хэрэгтэй, "Нөөц" таб руу очоод зүүн талын самбарт энэ домэйны локал хадгалалт болон түүнд агуулагдах бүх утгыг харах болно.

Дашрамд хэлэхэд, та localStorage нь домэйнуудтай хэрхэн ажилладаг талаар мэдэх ёстой. Домэйн бүрийн хувьд таны хөтөч өөрийн localStorage объектыг үүсгэдэг бөгөөд үүнийг зөвхөн тухайн домэйн дээр засварлах эсвэл үзэх боломжтой. Жишээлбэл, mydomain-1.com нь таны mydomain-2.com-ын localStorage-д хандах боломжгүй.

Яагаад надад localStorage хэрэгтэй байна вэ?

LocalStorage нь зөвхөн нэг зүйлд хэрэгтэй - хэрэглэгчийн сешн хооронд тодорхой өгөгдлийг хадгалах. Та хөтчийн дотоод санах ойд хадгалж болох мянга нэг зүйлийг бодож болно. Жишээлбэл, үүнийг хадгалдаг хөтчийн тоглоомууд эсвэл хэрэглэгч видео үзэж байхдаа зогссон агшин, маягтын янз бүрийн өгөгдөл гэх мэт.

Би localStorage-г хэрхэн эхлүүлэх вэ?

Маш энгийн.

LocalStorage-тэй ажиллах нь JavaScript дээрх объектуудтай маш төстэй юм. Үүнтэй ажиллах хэд хэдэн арга байдаг.

localStorage.setItem("түлхүүр", "утга")

LocalStorage-д нэмэх арга шинэ түлхүүрутгатай (хэрэв ийм түлхүүр байгаа бол түүнийг шинэ утгаар дарж бичнэ). Бид жишээ нь localStorage.setItem('myKey', 'myValue');

localStorage.getItem("түлхүүр")

Бид хадгалах сангаас тодорхой утгыг түлхүүрээр авдаг.

localStorage.removeItem("Түлхүүр")

Түлхүүрийг устгана уу

localStorage.clear()

Бүх хадгалах санг цэвэрлэж байна

Одоо та хөтчийнхөө localStorage-ээр tab нээж, өөрөө энэ сангаас өгөгдөл бичиж, татаж авах дасгал хийх боломжтой. Хэрэв ямар нэг зүйл байвал бид бүх кодыг js файлд бичнэ.

//Утгыг нэмэх эсвэл өөрчлөх: localStorage.setItem("myKey", "myValue"); //одоо танд localStorage-д хадгалагдсан "myValue" утгатай "myKey" түлхүүр байна //Үүнийг консол дээр хэвлэх: var localValue = localStorage.getItem("myKey"); console.log(localValue); //"myValue" //устгах: localStorage.removeItem("myKey"); //бүх хадгалах санг арилгах localStorage.clear() Үүнтэй адил, гэхдээ дөрвөлжин хаалттай: localStorage["Түлхүүр"] = "Утга" //localStorage-ийн утгыг тохируулах["Түлхүүр"] //LocalStorage устгах утгыг авах["Түлхүүр" ] // Утгыг устгаж байна

Мөн localStorage нь объект гэх мэт үүрлэсэн бүтэцтэй маш сайн ажилладаг гэдгийг тэмдэглэхийг хүсч байна.

//объект үүсгэх var obj = ( item1: 1, item2: , item3:"сайн уу" ); var serialObj = JSON.stringify(obj); //үүнийг цуврал болгох localStorage.setItem("myKey", serialObj); //үүнийг "myKey" түлхүүрээр хадгалах сан руу бичих var returnObj = JSON.parse(localStorage.getItem("myKey")) //үүнийг объект руу буцааж задлах

Хөтөчүүд localStorage-д 5МБ зай хуваарилдаг гэдгийг та бас мэдэж байх ёстой. Хэрэв та үүнийг хэтрүүлбэл QUOTA_EXCEEDED_ERR онцгой тохиолдол авах болно. Дашрамд хэлэхэд, түүний тусламжтайгаар та өөрийн хадгалах санд зай байгаа эсэхийг шалгах боломжтой.

( localStorage.setItem("key", "value"); ) catch (e) (хэрэв (e == QUOTA_EXCEEDED_ERR)) ( alert("Хязгаарлалт хэтэрсэн"); ) ) оролдоно уу

Дүгнэлтийн оронд

Энэхүү богино өгүүллээс хөгжүүлэгчид өөрсдөө энгийн дүгнэлт хийхийг хүсч байна энэ технологиаль хэдийн power болон main-тэй хамт таны төслүүдэд ашиглаж болно. Энэ нь сайн стандартчилал, маш сайн дэмжлэгтэй бөгөөд энэ нь зөвхөн цаг хугацааны явцад хөгждөг.