Орон нутгийн өгөгдөл хадгалах. JavaScript хэрэгцээнд зориулж localStorage ашиглах. HTML5-аас өмнөх орон нутгийн хадгалалтын товч түүх

Ихэнхдээ анхны JavaScript програм нь Todo жагсаалт байдаг боловч ийм програмуудын асуудал нь хуудсыг шинэчилсэний дараа жагсаалтын бүх зүйл алга болдог явдал юм.

Энэ асуудлыг шийдэх энгийн шийдэл бол Local Storage ашиглах явдал юм. Орон нутгийн санах ой нь хэрэглэгчийн машин дээр өгөгдлийг хадгалах боломжийг олгодог бөгөөд хуудсыг дахин сэргээсний дараа жагсаалтаас хялбархан татаж авах боломжтой. Энэ нийтлэлд бид локал хадгалах санг ашиглан хийх жижиг жагсаалт бичих болно.

Орон нутгийн санах ой ("вэб хадгалах") нь анх HTML5-ийн техникийн үзүүлэлтүүдийн нэг хэсэг байсан боловч одоо өөртөө шилжүүлсэн. Өгөгдлийг хадгалах хоёр арга бий:

• Орон нутгийн хадгалах сан: Байнгын хадгалалт, үүнийг бид ашиглах болно.
• Session Storage: Зөвхөн тухайн сессийн өгөгдлийг хадгалдаг бөгөөд хэрэв хэрэглэгч хуудсыг хаавал өгөгдөл устах болно.

Орон нутгийн хадгалалт нь хэрэглэгчийн компьютер дээр өгөгдлийг түлхүүр утгын хос хэлбэрээр хадгалах боломжийг олгодог бөгөөд энэ өгөгдөл нь хөтчийг хааж эсвэл компьютерийг унтраасны дараа ч бэлэн байх болно.

Хийх зүйлсийн жагсаалт үүсгэхийн тулд бидэнд хэрэгтэй:

• Элементийн агуулгыг оруулах текст оруулах.
• Жагсаалтад зүйл нэмэх товчлуур.
• Жагсаалтыг арилгах товч.
• Жагсаалт нь өөрөө (
  ).
  • Мөн алдааг харуулах нэмэлт div.

  Тиймээс HTML тэмдэглэгээ дараах байдлаар харагдах болно.

  Бүгдийг цэвэрлэ

  Бидний JavaScript-ээр амьдралд авчрах нэлээн энгийн бүтэц.

  Учир нь Бид jQuery ашигладаг, бид үүнийг нэмэлт холбох хэрэгтэй.

  JavaScript

  Эхлээд бид нэмэх товчийг дарж, оруулах талбар хоосон биш эсэхийг шалгах хэрэгтэй.

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

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

  // $("#todos").prepend(" гэсэн оруулга оруулах

• "+Тодорхойлолт+"
"); // текст талбарт үлдсэн бүх зүйлийг устгана уу $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos ); худал буцаана );

Орон нутгийн санах ойтой ажиллахын тулд та түлхүүр болон түүнд тохирох утгыг оруулах ёстой. Манай тохиолдолд түлхүүрийг 'todos' гэж нэрлэе, утга нь жагсаалтад байгаа бүх HTML код байх болно (таг дотор).

). Энэ кодыг jQuery ашиглан авахад хялбар байдаг. Эцэст нь бид маягтыг оруулахаас сэргийлж, хуудсыг дахин ачаалахгүйн тулд false гэж буцаана.

Дараагийн алхам бол локал санах ойг шалгах бөгөөд хэрэв "todos" түлхүүртэй утга байвал локал сангаас жагсаалтыг ачаална уу:

Хэрэв (localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

Учир нь Бид бэлэн HTML-г хадгалах санд хадгалж, дараа нь бид энэ кодыг жагсаалтад оруулна.

Бидний хийх зүйлсийн жагсаалт бараг бэлэн болсон тул жагсаалт цэвэрлэх функцийг хэрэгжүүлэх л үлдлээ. Хэрэглэгч товчлуур дээр дарахад жагсаалт бүхэлдээ устаж, дотоод санах ойг цэвэрлэх болно.

$("#clear").click(функц() ( window.localStorage.clear(); байршил.reload(); худал буцаана; ));

Бэлэн! Бүрэн код дараах байдлаар харагдаж байна.

$(баримт бичиг).бэлэн(функц() ( $("#add"). дарна уу(функц() ( var Description = $("# тайлбар").val(); хэрэв ($("# тайлбар"). val() == "") ( $("#alert").html("Анхааруулга! Та хийх ажлаа хоосон орхисон"); $("#alert").fadeIn().delay(1000).fadeOut ( ) $("#todos").prepend(");

• "+Тодорхойлолт+"
"); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); буцаах худал; )); хэрэв (localStorage) .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").клик(функц() ( window.localStorage.clear() ); location.reload();
Хөтөчийн дэмжлэг

Вэб санах ойг IE8 хүртэл бүх томоохон хөтчүүд дэмждэг. Та зөвхөн IE7 ба түүнээс доош хувилбараас болгоомжлох хэрэгтэй.

Дүгнэлт

Ийм жижиг програмуудын дотоод хадгалалт нь мэдээллийн санг маш сайн орлох боломжтой. Бага хэмжээний мэдээллийг хадгалах нь тийм ч хэцүү биш байх ёстой.

Хэрэглэгчийн төхөөрөмж дээрх өгөгдлийг хадгалах, удирдахад зориулсан HTML5 sessionStorage болон localStorage API объектуудыг судлах хичээл.

SessionStorage болон localStorage-ийн тухай ойлголт

Вэбсайтад зарим функцийг хэрэгжүүлэхдээ зохиогчид заримдаа хэрэглэгчийн төхөөрөмж дээр өгөгдлийг хадгалах шаардлагатай болдог бөгөөд ингэснээр дараа нь хандах боломжтой болдог. HTML5 sessionStorage болон localStorage API объектууд нь энэ функцийг хэрэгжүүлэх боломжийг танд олгоно.

Эдгээр объектууд нь бие биенээсээ ялгаатай бөгөөд тэдгээр нь тэдгээрт байрлуулсан өгөгдлийг хадгалах өөр өөр хугацаатай байдаг. SessionStorage объект нь өгөгдлийг хязгаарлагдмал хугацаанд хадгалдаг бөгөөд хэрэглэгч сессээ дуусгасны дараа эсвэл хөтчийг хаасны дараа шууд устгадаг. localStorage объект нь sessionStorage объектоос ялгаатай нь өгөгдлийг тодорхойгүй хугацаагаар хадгалдаг.

LocalStorage болон sessionStorage контейнер нь элементүүдийг (түлхүүр утгын хос) ашиглан өгөгдлийг хадгалдаг. Түлхүүр нь утгатай холбоотой тодорхойлогч юм. Тэдгээр. Утга бичих эсвэл авахын тулд та түүний түлхүүрийг мэдэх хэрэгтэй. Утга нь мөр тул JavaScript код дээр ажиллахдаа үүнийг анхаарч үзэх хэрэгтэй. Хэрэв та стрингийн оронд нийлмэл объектыг хадгалахад хадгалах шаардлагатай бол энэ асуудлыг шийдэх сонголтуудын нэг нь JSON.stringify() функцийг ашиглан JSON руу цуваа болгох явдал юм.



Хэрэв (window.sessionStorage && window.localStorage) ( //sessionStorage болон localtorage объектууд дэмжигддэг) else ( //sessionStorage болон localtorage объектууд дэмжигдэхгүй)

SessionStorage болон localStorage объектуудын аргууд ба уртын шинж чанарууд

Та дараах мөрийг ашиглан таны хөтөч эдгээр API-г дэмждэг эсэхийг шалгаж болно.

GetItem(key) Хадгалах зүйлийн утгыг түлхүүрээр нь авахын тулд getItem(key) аргыг ашигладаг. .setItem(түлхүүр,утга) SetItem(түлхүүр,утга) арга нь дэлгүүрт заасан түлхүүр болон утга бүхий зүйлийг нэмэхэд зориулагдсан. Хэрэв дэлгүүрт заасан түлхүүр бүхий элемент аль хэдийн байгаа бол энэ тохиолдолд түүний утга өөрчлөгдөх болно. .key(index) Түлхүүр(индекс) арга нь тухайн элементийн түлхүүрийг тухайн дэлгүүрт байрлах индексийн дугаараар нь буцаана. .removeItem(key) RemoveItem(түлхүүр) арга нь sessionStorage эсвэл localStorage контейнерээс заасан түлхүүртэй зүйлийг устгадаг. .clear() clear() арга нь савнаас бүх элементүүдийг устгадаг. .length length шинж чанар нь саванд байгаа элементүүдийн тоог буцаана.

LocalStorage-тэй ажиллах

Дараах жишээнүүдийг ашиглан localStorage-тэй ажиллахыг харцгаая.

1. Дэлгүүрт дэвсгэр өнгө агуулсан утгыг нэмнэ үү. Бид bgcolor товчлуурыг ашиглан энэ утгад хандах болно.

LocalStorage.setItem("bgColor","ногоон");

2. bgColor товчлуурыг ашиглан хадгалах сангаас дэвсгэр өнгө авна. Энэ хуудасны дэвсгэр өнгийг тохируулна уу.

Var bgColor = localStorage.getItem("bgColor"); $("body").css("арын өнгө", bgColor);

3. localStorage массивын 1 элементэд хадгалагдсан түлхүүр ямар нэртэй болохыг олж мэд.

4. LocalStorage контейнерээс bgcolor түлхүүртэй элементийг устгана уу:

LocalStorage.removeItem("bgColor");

5. LocalStorage контейнерээс бүх элементүүдийг устгана уу:

LocalStorage.clear();

6. LokalStorage контейнер доторх бүх элементүүдийг давт.

var str=""; for (var i=0; i< localStorage.length; i++) { str += "Ключ: " + localStorage.key(i) + "; Значение: " + localStorage.getItem(localStorage.key(i)) + ".
"; ) document.getElementById("элементүүд").innerHTML = str;

Var data = (өгөгдөл1: "Утга", өгөгдөл2: "Үнэ цэнэ", өгөгдөл3: "Утга" //... ) localStorage.setItem("Түлхүүр", JSON.stringify(өгөгдөл));

8. LocalStorage контейнер элементээс нийлмэл объектын утгыг авна.

Var data = (); хэрэв (localStorage.getItem("Түлхүүр")) (өгөгдөл = JSON.parse(localStorage.getItem("Түлхүүр")); )

SessionStorage хадгалалттай ажиллах нь ижил төстэй байдлаар хийгддэг.

localStorage хэмжээ

Ихэнх хөтчүүдэд localStorage контейнерийн хэмжээ 5 МБ байдаг. Энэ тоо нь том бөгөөд сайтын үйл ажиллагаанд шаардлагатай өгөгдлийг хадгалахад хангалттай юм.

Гэсэн хэдий ч вэбсайт зохиогчид энэ эзлэхүүнийг дүүргэх боломжтой нөхцөл байдал байдаг. Юуны өмнө, энэ нь хөгжүүлэгчид хуучин өгөгдлөө мартаж, localStorage-д улам олон шинэ өгөгдлийн хэсгүүдийг нэмэх тохиолдолд хамаарна. Үүний үр дүнд хэсэг хугацааны дараа энэ өгөгдлийн хэмжээ орон нутгийн хадгалах сангийн хязгаарт хүрч болзошгүй бөгөөд мэдээллийн шинэ хэсгийг хүлээн авахаа болино.

Үүнээс урьдчилан сэргийлэхийн тулд та өгөгдлийг хадгалахдаа огноог (цаг хугацааны тамга) зааж өгч болно. Дараа нь, жишээлбэл, хуудсыг ачаалахдаа энэ өгөгдөл хуучирсан эсэхийг шалгаарай. Хуучирсан өгөгдлийг устгана уу. Ингэснээр та localStorage дахь оруулгуудын дарааллыг хадгалах боломжтой.

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

// хэрэглэгчийн дэлгүүрт үзэж байгаа бүтээгдэхүүн var viewItem = ( id: "5456098", нэр: "LG G4 ухаалаг утас", dateView: шинэ Date() // онлайн дэлгүүрээс бүтээгдэхүүнийг үзсэн огноо ); // хэрэглэгчийн одоо үзэж байгаа бүтээгдэхүүнийг localStorage.setItem (viewItem.id, JSON.stringify(viewItem)) хадгалах санд хадгалах; // хуучин оруулгуудыг устгах var түлхүүр, утга; // хадгалах сан дахь бүх өгөгдлийг (var i=0; i