Орон нутгийн күүки хадгалах сан. Орон нутгийн хадгалах сан. Дотоод санах ойтой үндсэн CRUD үйлдлүүд

Вэб тоймХадгалах

Интернет дээр мэдээллийг вэб сервер болон вэб клиент (жишээ нь, хуудасны зочны компьютер) гэсэн хоёр газар хадгалах боломжтой. Зарим төрлийн өгөгдлийг эдгээр газруудын аль нэгэнд, бусад төрлийн мэдээллийг өөр газарт хамгийн сайн хадгалдаг.

Нууц, чухал мэдээллийг хадгалах зөв газар бол вэб сервер юм. Жишээлбэл, хэрэв та онлайн дэлгүүрээс сагсандаа бараа нэмбэл таны боломжит худалдан авалтын талаарх мэдээлэл вэб серверт хадгалагдана. Таны компьютер дээр таны (эсвэл таны компьютерийн тухай) мэдээллийг агуулсан хэдхэн байт хянах өгөгдөл хадгалагддаг тул вэб сервер таны аль тэрэг болохыг мэддэг. HTML5-ийн шинэ боломжуудтай байсан ч энэ системийг өөрчлөх шаардлагагүй - энэ нь найдвартай, аюулгүй, үр дүнтэй байдаг.

Гэхдээ сервер дээр өгөгдөл хадгалах нь үргэлж хамгийн сайн арга биш, учир нь... Заримдаа чухал бус мэдээллийг хэрэглэгчийн компьютер дээр хадгалах нь илүү хялбар байдаг. Жишээлбэл, хэрэглэгчийн тохиргоо (вэб хуудсыг хэрхэн харуулахыг хянадаг тохиргоо гэх мэт) болон програмын төлөвийг (хормын хувилбар) хадгалах нь утга учиртай. одоогийн байдалвэб програм) ашиглан зочин дараа нь ижил цэгээс үргэлжлүүлэн ажиллуулж болно.

HTML5-аас өмнө цорын ганц арга замлокал өгөгдөл хадгалах нь файлын механизмыг ашиглаж байсан жигнэмэг, энэ нь вэб сервер болон хөтчүүдийн хооронд бага хэмжээний таних мэдээллийг солилцох зорилготой байсан. Күүки нь бага хэмжээний өгөгдөл хадгалахад тохиромжтой боловч тэдэнтэй ажиллах JavaScript загвар нь жаахан төвөгтэй байдаг. Мөн күүки систем нь хөгжүүлэгчийг дуусах огноотой хөөцөлдөж, хуудасны хүсэлт бүрээр интернетээр нааш цааш мэдээлэл илгээхэд хүргэдэг.

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

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

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

Вэб санд хадгалагдсан мэдээлэл нь үнэндээ Интернетэд хадгалагддаггүй, харин вэб хуудасны зочны компьютер дээр хадгалагддаг. Өөрөөр хэлбэл вэб хадгалалт гэдэг нь мэдээллийг интернетэд биш харин интернэтээс мэдээлэл хадгалахыг хэлнэ.

Хоёр төрлийн вэб хадгалалт байдаг бөгөөд эдгээр нь хоёр объекттой ямар нэгэн байдлаар холбоотой байдаг:

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

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

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

Вэб хуудасны кодын үүднээс авч үзвэл локал хадгалалт болон сессийн өгөгдөл хадгалах нь яг адилхан ажилладаг. Ганц ялгаа нь өгөгдөл хадгалах хугацаа юм.

Дотоод хадгалах санг ашиглах нь хэрэглэгчийн дараа дараагийн вэб хуудсанд зочлоход шаардлагатай мэдээллийг хадгалах хамгийн сайн боломжийг олгодог. Сеанс дэлгүүрийг нэг хуудаснаас нөгөө хуудас руу шилжүүлэх шаардлагатай өгөгдлийг хадгалахад ашигладаг. (Сурс хадгалах сан нь зөвхөн нэг хуудсанд ашиглагддаг түр зуурын өгөгдлийг хадгалах боломжтой боловч ердийн JavaScript хувьсагч нь энэ зорилгоор сайн ажилладаг.)

Дотоод санах ой болон сессийн хадгалалт хоёулаа вэбсайтын домэйнтэй холбоотой. Тиймээс, хэрэв та www..html хуудасны өгөгдлийг дотоод санах ойд хадгалах юм бол энэ өгөгдөл нь www..html хуудсанд бэлэн байх болно, учир нь Эдгээр хуудас хоёулаа ижил домэйнтэй. Гэхдээ энэ өгөгдөл нь бусад домэйн дээрх хуудсуудад боломжгүй болно.

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

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

Их хэмжээний өгөгдөл хадгалахад зориулагдсан, одоо хүртэл хөгжиж буй мэдээллийн сангийн стандарт IndexedDBХэрэглэгч зөвшөөрвөл ихэвчлэн 50 МБ ба түүнээс дээш хэмжээтэй илүү их хэмжээний дотоод хадгалах боломжийг олгодог.

Өгөгдлийг хадгалж байна

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

Мэдээллийн хэсгийг хадгалах синтакс нь дараах байдалтай байна.

localStorage = өгөгдөл;

// JS localStorage["хэрэглэгчийн нэр"] = "Иван Петров";

Мэдээжийн хэрэг, статик текстийн фрагментийг хадгалах нь утгагүй юм. Ихэвчлэн бид одоогийн огноо, математик тооцооллын үр дүн эсвэл хэрэглэгчийн оруулсан текст өгөгдөл гэх мэт зарим төрлийн хувьсах өгөгдлийг маягтын талбарт хадгалах хэрэгтэй. Дараах нь хэрэглэгчийн оруулсан текст өгөгдлийг хадгалах жишээ юм.

saveData() функц ( // Текстийн талбаруудын утгыг авна уу var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // Оруулсан текстийг хадгалах текст талбарт localStorage["localData"] = localData // Текстийн талбарт оруулсан текстийг сесс хадгалах sessionStorage["sessionData"] = sessionData функцийг хадгалах ( // Хадгалсан өгөгдлийг дараахаас ачаалах; storage var localData = localStorage ["localData"]; var sessionData = sessionStorage["sessionData"]; // Хэрэв (localData != null) ( document.getElementById("localData").value = localData; ) хэрэв (sessionData ! = null) ( document.getElementById("sessionData").value = sessionData; ) )

Энэ хуудас нь локал хадгалах (дээд талд) болон сесс хадгалах (доод талд) гэсэн хоёр текст талбарыг агуулна. "Хадгалах" товчийг дарснаар текст талбарт оруулсан текстийг хадгалах ба "Ачаалах" товчийг дарснаар талбарт хадгалагдсан харгалзах өгөгдлийг харуулна.

Вэб санах ой нь нийтлэг бус өмчийн синтаксийг дэмждэг. Энэ синтаксийн дүрмийн дагуу бид username нэртэй хадгалах байршлыг localStorage["username"] гэхээсээ илүү localStorage.username гэж нэрлэдэг. Хоёр төрлийн синтакс нь ижил төстэй бөгөөд аль нэгийг нь ашиглах нь хувийн сонголт юм.

Вэб сервергүйгээр вэб хадгалах сан ажиллахгүй

Таны вэб хадгалах судалгаанд та гэнэтийн асуудалтай тулгарч магадгүй юм. Олон хөтчүүдэд вэб хадгалалт нь зөвхөн вэб серверээс өгсөн хуудсуудад л ажилладаг. Сервер хаана, интернет эсвэл өөрийн компьютер дээр байх нь хамаагүй, хамгийн чухал зүйл бол хуудсууд нь дотоодоос нээгдээгүй байх явдал юм. хатуу диск(Жишээлбэл, хоёр даржхуудасны файлын дүрсээр).

Энэ функц нь хөтчүүдийн дотоод хадгалах зайг хуваарилах арга замын гаж нөлөө юм. Өмнө дурьдсанчлан, хөтчүүд нь вэб сайтын дотоод санах ойг 5 МБ хүртэл хязгаарладаг бөгөөд энэ нь дотоод санах ойг ашиглахыг хүссэн хуудас бүрийг вэбсайтын домэйнтэй холбохыг шаарддаг.

Хэрэв та дотоод хатуу дискээсээ вэб санах ой ашигладаг хуудсыг нээвэл яах вэ? Энэ бүхэн хөтөчөөс хамаарна. Интернет хөтөч Explorer нь вэб хадгалах сангийн дэмжлэгээ бүрэн алдаж байгаа бололтой. localStorage болон sessionStorage объектууд алга болж, тэдгээрийг ашиглахыг оролдох нь JavaScript алдаа үүсгэдэг.

IN Firefox хөтөч localStorage болон sessionStorage объектууд байрандаа үлдэж, дэмжигдсэн мэт санагддаг (Modernizr хүртэл дэмжигдсэнийг тодорхойлдог), гэхдээ хадгалалт руу илгээгдсэн бүх зүйл хаана байгааг Бурхан мэдэх болно. IN Chrome хөтөчдахин өөр зүйл - ихэнх вэб хадгалах функцууд нь зохих ёсоор ажилладаг боловч зарим боломжууд (onStorage үйл явдал гэх мэт) ажиллахгүй байна.

File API ашиглах үед ижил төстэй асуудал үүсдэг. Тиймээс та эдгээр бүх эргэлзээтэй байдлаас зайлсхийхийн тулд туршиж буй хуудсаа тестийн сервер дээр байрлуулбал өөрийгөө маш их бэрхшээлээс аврах болно.

Вэб хадгалахад зориулсан хөтөчийн дэмжлэг

Вэб хадгалах нь HTML5-ийн хамгийн их дэмждэг функцүүдийн нэг юм сайн түвшинбүх томоохон хөтөч дээр дэмжлэг үзүүлэх. Доорх хүснэгтэд вэб хадгалах санг дэмждэг гол хөтчүүдийн хамгийн бага хувилбаруудыг харуулав.

Эдгээр бүх хөтчүүд нь дотоод санах ой болон сессийн өгөгдөл хадгалах боломжийг олгодог. Гэхдээ onStorage үйл явдлыг дэмжихэд IE 9, Firefox 4 эсвэл Chrome 6 гэх мэт хөтчүүдийн дараагийн хувилбарууд шаардлагатай.

Хамгийн асуудалтай хувилбар бол вэб хадгалах санг огт дэмждэггүй IE 7 юм. Товч шийдэл болгон та күүки ашиглан вэб хадгалах санг дуурайж болно. Энэ нь яг төгс шийдэл биш, гэхдээ энэ нь ажилладаг. Энэ цоорхойг арилгах албан ёсны скрипт байхгүй ч HTML5 Cross Browser хуудаснаас ("Вэб хадгалах" хэсэгт) зарим сайн эхлэлийг олох боломжтой.

The Web Storage APIнь күүки ашиглахаас хамаагүй ойлгомжтой байдлаар хөтчүүд түлхүүр/утга хосыг хадгалах механизмуудыг хангадаг.

Вэб хадгалах тухай ойлголт ба хэрэглээ

Web Storage доторх хоёр механизм нь дараах байдалтай байна:

• sessionStorage нь тухайн гарал үүслийн хувьд хуудасны сессийн хугацаанд (хөтөч нээлттэй байх үед, хуудсыг дахин ачаалах, сэргээх зэрэг) тус тусад нь хадгалах талбайг хадгалдаг.
  • Өгөгдлийг зөвхөн сессэд зориулж хадгалдаг бөгөөд энэ нь хөтөч (эсвэл таб) хаагдах хүртэл өгөгдөл хадгалагдана гэсэн үг юм.
  • Мэдээллийг хэзээ ч сервер рүү шилжүүлдэггүй.
  • Хадгалах хэмжээ нь күүкигээс их (хамгийн ихдээ 5 МБ).
• localStorage нь ижил зүйлийг хийдэг боловч хөтчийг хааж, дахин нээх үед ч хэвээр байна.
  • Хугацаа дуусах хугацаагүйгээр өгөгдлийг хадгалах ба зөвхөн JavaScript-ээр дамжуулан эсвэл Хөтчийн кэш / Орон нутагт хадгалагдсан өгөгдлийг устгадаг.
  • Хадгалах хязгаар нь гурвын хамгийн дээд хэмжээ юм.

Үзүүлэлтүүд

Хөтөчийн нийцтэй байдал

Window.localStorage

https://github.com/mdn/browser-compat-data болон бидэнд татах хүсэлт илгээнэ үү.

Домог

Window.sessionStorage

Энэ хуудсан дээрх нийцтэй байдлын хүснэгтийг бүтэцлэгдсэн өгөгдлөөр үүсгэсэн. Хэрэв та өгөгдөлд хувь нэмрээ оруулахыг хүсвэл https://github.com/mdn/browser-compat-data хаягаар орж, татах хүсэлтээ бидэнд илгээнэ үү.

GitHub дээрх нийцтэй байдлын өгөгдлийг шинэчлэх

Домог

Хувийн үзэх / Нууцлалтай горимууд

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

Ихэнх хөтчүүд хадгалалтын API-г ашиглах боломжтой хэвээр байгаа бөгөөд бүрэн ажиллагаатай мэт харагдах стратегийг сонгосон бөгөөд нэг том ялгаа нь хөтчийг хаасны дараа хадгалагдсан бүх өгөгдөл устах болно. Эдгээр хөтчүүдийн хувьд одоо байгаа хадгалагдсан өгөгдөлтэй юу хийх ёстой талаар өөр өөр тайлбарууд байсаар байна (ердийн хайлтын сессээс). Хувийн горимд байх үед унших боломжтой байх ёстой юу? Дараа нь зарим хөтчүүд, ялангуяа Safari, хадгалах боломжтой, гэхдээ хоосон, 0 байт квоттой, өгөгдөл бичих боломжгүй болгодог шийдлийг сонгосон байдаг.

Хөгжүүлэгчид эдгээр янз бүрийн хэрэгжилтийн талаар мэдэж байх ёстой бөгөөд Web Storage API-аас хамааран вэбсайтуудыг хөгжүүлэхдээ тэдгээрийг анхаарч үзэх хэрэгтэй. Дэлгэрэнгүй мэдээлэл авахыг хүсвэл энэ сэдвийг тусгайлан авч үзсэн WHATWG блог нийтлэлийг харна уу.

Орчуулга: Влад Мержевич

Байнгын локал хадгалалт нь үйлчлүүлэгчийн программууд серверийн програмуудаас давуу талтай талбар юм. зэрэг хэрэглээний хувьд үйлдлийн систем, тохиргоо эсвэл гүйцэтгэлийн байдал зэрэг өгөгдлийг хадгалах, сэргээхэд зориулж хийсвэрлэх давхаргыг хангадаг. Эдгээр утгыг платформын зарчмаас хамааран бүртгэл, INI файл, XML файл эсвэл бусад газарт хадгалж болно. Хэрэв таны үйлчлүүлэгчийн програмд ​​зөвхөн түлхүүр/утга хосоос илүү локал хадгалах сан хэрэгтэй бол та өөрийн мэдээллийн баазыг оруулж, өөрийн файлын формат эсвэл бусад олон шийдлийг гаргаж болно.

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

• Күүки нь HTTP хүсэлт бүрт багтдаг бөгөөд ингэснээр ижил өгөгдлийг дахин дахин дамжуулах замаар таны вэб програмыг удаашруулдаг;
• Интернэтээр шифрлэгдээгүй хэлбэрээр өгөгдөл дамжуулах үед (вэб програмыг бүхэлд нь SSL-ээр дамжуулсан ч гэсэн) HTTP хүсэлт бүрт күүки багтдаг;
• Күүки нь ойролцоогоор 4КБ датагаар хязгаарлагддаг бөгөөд энэ нь таны програмыг удаашруулахад хангалттай (дээрхийг харна уу), гэхдээ ашигтай байх хангалттай биш.

Бидний үнэхээр хүсч буй зүйл бол:

• их хэмжээний хадгалах зай;
• үйлчлүүлэгч тал дээр ажиллах;
• хуудасны шинэчлэлтийг анхаарч үзэх;
• сервер рүү илгээхгүй.

HTML5-аас өмнө үүнд хүрэх бүх оролдлого эцэст нь янз бүрийн аргаар бүтэлгүйтсэн.

HTML5-аас өмнөх орон нутгийн хадгалалтын товч түүх

Эхэндээ ганц л Internet Explorer байсан. Наад зах нь Майкрософт үүнийг дэлхий нийтээр бодохыг хүссэн юм. Үүний тулд Нэгдүгээр Их дайнХөтөчүүд Майкрософт маш олон зүйлийг зохион бүтээж, дайныг дуусгавар болгосон Internet Explorer хөтөчдөө оруулсан. Эдгээр зүйлсийн нэгийг DHTML Behaviors, нэг зан үйлийг userData гэж нэрлэдэг.

UserData нь вэб хуудсанд XML-тэй төстэй шаталсан бүтцээр нэг домэйн бүрт 64 КБ хүртэлх өгөгдлийг хадгалах боломжийг олгодог. Дотоод сүлжээний сайтууд гэх мэт итгэмжлэгдсэн домайнууд арав дахин их зүйлийг хадгалах боломжтой. Хөөе, 640 KB нь хүн бүрт хангалттай байх ёстой. IE нь эдгээр конвенцийг өөрчлөх ямар ч арга замыг өгөөгүй тул боломжтой санах ойн хэмжээг нэмэгдүүлэх арга байхгүй.

2002 онд Adobe Flash 6-д амжилтгүй болсон бөгөөд "Flash Cookies" гэж төөрөгдүүлсэн функцийг нэвтрүүлсэн. IN Flash орчинЭнэ чадварыг Local Shared Objects (LSO) гэж илүү сайн мэддэг. Товчхондоо, энэ нь Flash объектуудад нэг домэйнд 100 КБ хүртэлх өгөгдлийг хадгалах боломжийг олгодог. Flash болон JavaScript хоёрын хоорондох гүүрний эхэн үеийн загварыг бүтээсэн Брэд Нойберг үүнийг AMASS (AJAX Massive Storage System) гэж нэрлэсэн боловч Flash дизайны зарим онцлог шинж чанаруудаар хязгаарлагдаж байв. 2006 он гэхэд Flash 8-д ExternalInterface-г нэвтрүүлснээр LSO-д JavaScript-ээр хандах нь илүү хялбар бөгөөд хурдан болсон. Брэд AMASS-ийг дахин бичиж, dojox.storage нэрээр алдартай Dojo Toolkit-д нэгтгэсэн. Flash нь домэйн бүрт "үнэгүй" 100 кб хадгалах багтаамж өгдөг. Нэмж дурдахад, энэ нь хэрэглэгчдэд хүсэлтийн дагуу хадгалах хэмжээг дарааллаар нь нэмэгдүүлэхийг санал болгодог (1 МБ, 10 МБ гэх мэт).

хэрэв (Modernizr.localstorage) (
// window.localStorage боломжтой!
) өөр (
// HTML5 санах ойг дэмждэггүй
}

HTML5 санг ашиглаж байна

HTML5 хадгалалт нь түлхүүр/утга хосын нэр дээр суурилдаг. Та түлхүүрийн нэр дээр тулгуурлан мэдээллийг хадгалдаг бөгөөд дараа нь тэр өгөгдлийг ижил түлхүүрээр сэргээж болно. Түлхүүр нэр нь мөр юм. Өгөгдөл нь мөр, логик, бүхэл тоо, хөвөгч цэгийн тоо зэрэг JavaScript-ийн дэмждэг ямар ч төрлийн байж болно. Гэсэн хэдий ч бодит байдал дээр өгөгдөл нь мөр хэлбэрээр хадгалагддаг. Хэрэв та мөргүй мөрүүдийг хадгалж, сэргээж байгаа бол хүлээн авсан өгөгдлийг зөв JavaScript төрөл болгон хөрвүүлэхийн тулд parseInt() эсвэл parseFloat() зэрэг функцуудыг ашиглах шаардлагатай болно.

Хадгалах интерфейс (
getItem(түлхүүр)-ээр авах;
setItem (түлхүүр, өгөгдөл);
};

Одоо байгаа түлхүүр нэрээр setItem()-г дуудах нь өмнөх утгыг чимээгүй дарж бичих болно. Байгаагүй түлхүүрээр getItem()-г дуудах нь үл хамаарах зүйл биш харин NULL утгыг буцаана.

Бусад JavaScript объектуудын нэгэн адил та localStorage объектод ассоциатив массив байдлаар хандах боломжтой. getItem() болон setItem() аргуудыг ашиглахын оронд та зүгээр л зааж өгч болно дөрвөлжин хаалт. Жишээлбэл, энэ кодын хэсэг

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("бар", foo);

дөрвөлжин хаалт синтакс ашиглан дахин бичиж болно:

var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;

Түлхүүр нэрээр утгыг устгах, мөн дэлгүүрийг бүхэлд нь цэвэрлэх (өөрөөр хэлбэл бүх түлхүүр, утгыг нэг дор устгах) аргууд байдаг.

Хадгалах интерфейс (
RemoveItem(түлхүүр)-ээр устгах;
тодорхой ();
}

RemoveItem()-г байхгүй түлхүүрээр дуудахад юу ч гарахгүй.

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

Хадгалах интерфейс (
урт
Түлхүүрийг авах(сөрөг бус бүхэл тоо);
}

Хэрэв key()-г дуудах үед индекс 0-ээс (урт-1) хооронд байхгүй бол функц null-г буцаана.

HTML5 Хадгалах талбайн хяналт

Хэрэв та хадгалах сангийн өөрчлөлтийг программчлан хянахыг хүсвэл хадгалалтын үйл явдлыг барих ёстой. setItem() , removeItem() эсвэл clear() дуудаж ямар нэг зүйлийг өөрчлөх үед энэ үйл явдал цонхны объект дээр тохиолддог. Жишээлбэл, хэрэв та суулгасан бол одоо байгаа үнэ цэнээсвэл ямар ч түлхүүр байхгүй үед clear() гэж нэрлэгдэх юм бол хадгалалтын хэсэг бодитоор өөрчлөгдөөгүй тул үйл явдал гарахгүй.

Хадгалах үйл явдлыг localStorage объект ажиллаж байгаа бүх газар дэмждэг, үүнд Internet Explorer 8 орно. IE 8 нь W3C addEventListener стандартыг дэмждэггүй (хэдийгээр энэ нь IE 9-д нэмэгдэх болно) тиймээс хадгалалтын үйл явдлыг барьж авахын тулд та аль үйл явдлын хөдөлгүүрийг шалгах хэрэгтэй. хөтчийг дэмждэг (хэрэв та үүнийг өмнө нь бусад үйл явдалтай хамт хийж байсан бол энэ хэсгийн төгсгөл рүү алгасаж болно). Хадгалах үйл явдлыг таслан зогсоох нь бусад үйл явдлуудыг таслан зогсоохтой ижил аргаар ажилладаг. Хэрэв та jQuery эсвэл өөр зүйл ашиглахыг хүсч байвал JavaScript номын санҮйл явдал зохицуулагчийг бүртгэхийн тулд та үүнийг санах ойн тусламжтай хийх боломжтой.

хэрэв (window.addEventListener) (
window.addEventListener("хадгалах", бариул_хадгалах, худал);
) өөр (
window.attachEvent("хадгалах", бариул_хадгалах);
};

handle_storage-ийн буцаан дуудлагыг window.event-д хадгалдаг Internet Explorer-ээс бусад тохиолдолд StorageEvent объектоор дуудна.

функцийн бариул хадгалах(д) (
хэрэв (!e) ( e = window.event; )
}

Энэ тохиолдолд e хувьсагч нь дараах ашигтай шинж чанаруудтай StorageEvent объект байх болно.

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

Хадгалах үйл явдлыг цуцлах боломжгүй бөгөөд handle_storage дуудлагын функц дотор өөрчлөлтийг зогсоох арга байхгүй. Энэ бол зүгээр л хөтчийн танд “Хөөе, энэ саяхан болсон. Чамд хийж чадах зүйл байхгүй, би зүгээр л чамайг мэдээсэй гэж хүссэн."

Одоогийн хөтөч дээрх хязгаарлалтууд

Гуравдагч талын залгаасуудыг ашиглан локал хадгалалтын түүхийн талаар ярихдаа би техник бүрийн хязгаарлалтыг дурдсан. Би одоо стандарт HTML5 санах ойн хязгаарлалтын талаар юу ч хэлээгүйгээ санав. Би танд хариултуудыг өгч, дараа нь тайлбарлах болно. Хариултууд нь ач холбогдлын дарааллаар "5 мегабайт", "QUOTA_EXCEEDED_ERR" болон "байхгүй" байна.

"5 мегабайт" - анхдагчаар хэр хэмжээний хадгалах зай өгдөг. Энэ утга нь HTML5-ийн тодорхойлолтод санал болголтоос өөр зүйл биш ч гэсэн бүх хөтчүүдэд гайхалтай нийцэж байна. Та өгөгдлийг эх форматаар биш харин мөрүүдийг хадгалж байгаагаа ойлгох хэрэгтэй. Хэрэв та олон тооны бүхэл тоо эсвэл хөвөгч цэгүүдийг хадгалдаг бол дүрслэлийн ялгаа их байж болно. Хөвөгч цэгийн тооны цифр бүрийг ийм тоонуудын ердийн дүрслэлээс илүү тэмдэгт болгон хадгалдаг.

"QUOTA_EXCEEDED_ERR" нь 5 МБ-ын квотоос хэтэрсэн тохиолдолд таны хүлээн авах онцгой тохиолдол юм. "Үгүй" нь дараагийн тодорхой асуултын хариулт юм: "Би хэрэглэгчээс нэмэлт хадгалах зай хүсч болох уу?" Үүнийг бичиж байх үед хөтөч нь вэб хөгжүүлэгчдэд илүү их зай шаардах механизмыг хэрэгжүүлдэггүй. Зарим хөтчүүд (Opera гэх мэт) нь хэрэглэгчдэд сайт тус бүрээр хадгалах квотыг хянах боломжийг олгодог боловч энэ нь зөвхөн хэрэглэгчийн санаачлага бөгөөд хөгжүүлэгчийн хувьд таны вэб аппликейшнд суулгаж болох аливаа зүйлтэй холбоогүй юм.

HTML5 хадгалах сан ажиллаж байна

HTML5 хадгалах сангийн үйл ажиллагааг харцгаая. Зургийн тухай бүлэгт бүтээсэн зүйл рүүгээ дахин орцгооё. Энэ тоглоомонд жижиг асуудал бий: хэрэв та тоглоомын дундуур хөтчийн цонхыг хаавал үр дүн нь алга болно. Гэхдээ HTML5 хадгалах сангийн тусламжтайгаар бид тоглоомын процессыг дотооддоо, хөтөч дээрээ хадгалах боломжтой. Демо-г нээж, хэд хэдэн алхам хийж, хөтчийн табыг хааж, дараа нь дахин нээнэ үү. Хэрэв таны хөтөч HTML5 санах ойг дэмждэг бол үзүүлэнгийн хуудас нь таны хэдэн нүүдэл хийсэн, самбар дээрх хэсэг бүрийн байрлал, тэр ч байтугай сонгосон хэсгийг багтаасан тоглоомын яг байрлалыг ид шидийн байдлаар санах болно.

Хэрхэн ажилладаг? Тоглоомд өөрчлөлт гарах бүрт бид энэ функцийг дуудах болно.

saveGameState() функц (

localStorage["halma.game.in.progress"] = gGameInProgress;
for (var i = 0; i< kNumPieces; i++) {
localStorage["halma.piece." + i + ".мөр"] = gPieces[i].мөр;
localStorage["halma.piece." + i + ".багана"] = gPieces[i].багана;
}
localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage["halma.movecount"] = gMoveCount;
үнэнийг буцаах;
}

Таны харж байгаагаар localStorage объектыг тоглоомын явцыг хадгалахад ашигладаг (gGameInProgress, логикийн төрөл). Дараа нь бүх хэсгүүдийг ангилна (gPieces, JavaScript массив) мөн тус бүрт мөр, багана хадгалдаг. Дараа нь сонгосон хэсэг (gSelectedPieceIndex, бүхэл тоо), урт цуврал үсрэлтүүдийн дунд байгаа хэсэг (gSelectedPieceHasMoved, логик) зэрэг тоглоомын зарим нэмэлт төлөвийг хадгална. нийт тоохийсэн нүүдэл (gMoveCount, бүхэл тоо).

Хуудсыг ачаалах үед бүх хувьсагчдыг анхны утга руу нь буцаадаг newGame() функцийг автоматаар дуудахын оронд бид resumeGame() гэж нэрлэдэг. ResumeGame() функц нь HTML5 санах ойг ашиглан локал санах ой дахь тоглоомын төлөвийг шалгадаг. Хэрэв байгаа бол энэ нь localStorage объектыг ашиглан утгуудыг сэргээдэг.

ResumeGame() функц (
хэрэв (!supportsLocalStorage()) ( худал буцаана; )
gGameInProgress = (localStorage["halma.game.in.progress"] == "үнэн");
хэрэв (!gGameInProgress) ( худал буцаана; )
gPieces = шинэ массив(kNumPieces);
for (var i = 0; i< kNumPieces; i++) {
var row = parseInt(localStorage["halma.piece." + i + ".row"]);
var багана = parseInt(localStorage["halma.piece." + i + ".column"]);
gPieces[i] = шинэ нүд(мөр, багана);
}
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "үнэн";
gMoveCount = parseInt(localStorage["halma.movecount"]);
drawboard();
үнэнийг буцаах;
}

Энэ функцийн хамгийн чухал хэсэг бол би энэ бүлгийн өмнө дурдсан бөгөөд энд давтах болно: өгөгдөл нь мөр хэлбэрээр хадгалагддаг. Хэрэв та утаснаас өөр зүйл хадгалж байгаа бол тэдгээрийг хүлээн авахдаа хөрвүүлэх хэрэгтэй болно. Жишээлбэл, тоглоом явагдаж байгаа (gGameInProgress) нь Boolean төрөл юм. saveGameState() функцэд бид үүнийг зүгээр л хадгалдаг бөгөөд өгөгдлийн төрлөөс санаа зовох хэрэггүй.

localStorage["halma.game.in.progress"] = gGameInProgress;

Гэхдээ resumeGame() функцэд бид локал сангаас олж авсан утгыг мөр болгон харж, өөрийн логик утгыг гараар бүтээх ёстой.

gGameInProgress = (localStorage["halma.game.in.progress"] == "үнэн");

Үүний нэгэн адил нүүдлийн тоог gMoveCount-д бүхэл тоогоор хадгалдаг бөгөөд saveGameState() функцэд бид үүнийг зүгээр л хадгалдаг.

localStorage["halma.movecount"] = gMoveCount;

Гэхдээ resumeGame() функцэд бид JavaScript-н суулгасан parseInt() функцийг ашиглан утгыг бүхэл тоо болгон хувиргах ёстой.

gMoveCount = parseInt(localStorage["halma.movecount"]);

Түлхүүр/үнэ цэнийн хосуудаас гадна: Өрсөлдөөнт алсын хараа

Хэдийгээр түүхийн туршид олон заль мэх, тойрон гарах арга замууд байсан ч HTML5 хадгалах сангийн өнөөгийн байдал нь гайхалтай эрүүл байна. Шинэ API нь стандартчилагдсан бөгөөд бүх гол хөтөч, платформ болон төхөөрөмжүүдэд орсон. Вэб хөгжүүлэгчийн хувьд энэ нь өдөр бүр харагддаг зүйл биш гэж үү? Гэхдээ энэ нь "5 мегабайт түлхүүр/утга хос"-оос илүү олон зүйл байгаа бөгөөд байнгын орон нутгийн санах ойн ирээдүй нь ... би яаж хэлэх ёстой вэ ... энэ нь өрсөлдөх чадвартай алсын хараа гэж хэлье.

Нэг алсын хараа нь таны аль хэдийн мэддэг товчлол юм - SQL. 2007 онд Google нь хөтөч хоорондын нээлттэй эхийн залгаас болох Gears-ийг эхлүүлсэн эх код, үүнд суурилагдсан SQLite-д суурилсан мэдээллийн сан багтана. Энэхүү анхны загвар нь хожим Вэб SQL өгөгдлийн сангийн тодорхойлолтыг бий болгоход нөлөөлсөн. Вэб SQL өгөгдлийн сан (өмнө нь "WebDB" гэгддэг) нь мэдээллийн сангийн эргэн тойронд нимгэн боодолтой байдаг. SQL өгөгдөл, энэ нь танд JavaScript-ээс дараах зүйлсийг хийх боломжийг олгодог:

openDatabase("баримт бичиг", "1.0", "Орон нутгийн баримт хадгалах сан", 5*1024*1024, функц (db) (
db.changeVersion("", "1.0", функц (t) (
t.executeSql("CREATE TABLE docids (id, name)");
), алдаа);
});

Таны харж байгаагаар ихэнх үйлдлүүд ExecuteSQL аргатай нийцэж байна. Энэ мөр нь SELECT, UPDATE, INSERT, DELETE гэх мэт ямар ч SQL командыг дэмждэг. Яг л ийм байна сервер програмчлалөгөгдлийн сан, та үүнийг JavaScript ашиглан хийхээс бусад тохиолдолд! Ай баяр баясгалан!

Вэб SQL мэдээллийн сангийн тодорхойлолтыг дөрвөн хөтөч, платформ дээр хэрэгжүүлсэн.

Мэдээжийн хэрэг, хэрэв та амьдралдаа нэгээс олон мэдээллийн сан ашигласан бол "SQL" гэдэг нь хатуу бөгөөд хурдан стандарт гэхээсээ илүү маркетингийн нэр томъёо гэдгийг та мэднэ (зарим нь HTML5-ийн талаар ижил зүйлийг хэлж магадгүй, гэхдээ энэ нь хамаагүй) . Мэдээжийн хэрэг, одоогийн SQL-ийн тодорхойлолт (SQL-92 гэж нэрлэдэг) байдаг боловч зөвхөн энэ үзүүлэлтэд нийцэх мэдээллийн сангийн сервер дэлхий дээр байдаггүй. Oracle SQL, Microsoft SQL, MySQL-д SQL, PostgreSQL-д SQL, SQLite-д SQL байдаг. Үнэн хэрэгтээ эдгээр бүтээгдэхүүн бүр цаг хугацааны явцад шинэ SQL функцийг нэмдэг тул "SQLite дахь SQL" гэж хэлэх нь хангалтгүй юм. Та "SQLite X.Y.Z хувилбартай хамт ирдэг SQL-ийн хувилбар" гэж хэлэх хэрэгтэй.

Энэ бүхэн нь биднийг Вэб SQL-ийн тодорхойлолтын дээд хэсэгт байршуулсан дараагийн мэдэгдэл рүү авчирдаг.

Тодорхойлолт мухардалд хүрсэн: сонирхсон бүх хөгжүүлэгчид сервер талын SQL (SQLite) ашигладаг боловч стандартчилал руу шилжихийн тулд бидэнд олон бие даасан хэрэгжилт хэрэгтэй байна. Бусад хөгжүүлэгчид энэ тодорхойлолтыг хэрэгжүүлэх сонирхолтой байгаа ч SQL аялгууны тайлбарыг зөвхөн Sqlite-ийн лавлагаа болгон үлдээсэн бөгөөд энэ нь стандартын хувьд хүлээн зөвшөөрөгдөхгүй.

Үүний цаана би вэб програмуудад зориулсан дэвшилтэт, байнгын локал хадгалалтын өөр нэг өрсөлдөөнт алсын харааны талаар танд хэлэх болно: Indexed Database API, өмнө нь "WebSimpleDB", одоо IndexedDB гэж нэрлэгддэг.

Indexed Database API нь SQL өгөгдлийн сангаас авсан олон санааг агуулсан объектын хадгалалт гэж нэрлэгддэг зүйлийг өгдөг. "Бичлэг" бүхий "мэдээллийн сан" байдаг бөгөөд бичлэг бүр тодорхой тооны "талбар"-тай байдаг. Талбар бүр нь мэдээллийн санг үүсгэх үед тодорхойлогддог тодорхой өгөгдлийн төрөлтэй байдаг. Та бичлэгийн дэд багцыг сонгоод дараа нь "курсор"-оор жагсааж болно. Объект хадгалалтын өөрчлөлтийг "гүйлгээ"-ээр боловсруулдаг.

Хэрэв та хэзээ нэгэн цагт SQL өгөгдлийн санг програмчилж байсан бол эдгээр нэр томъёо нь танд танил байх магадлалтай. Гол ялгаа нь объектын хадгалалт нь бүтэцлэгдсэн хайлтын хэлгүй байдаг. Та "ИДЭВХТЭЙ = "Y" гэсэн "ХЭРЭГЛЭГЧДээс SELECT *" гэх мэт нөхцөл бичихгүй. Үүний оронд бид USERS мэдээллийн санг нээж, бүртгэлийг тоолж, бүртгэлээ шүүж, үлдсэн бичлэгүүдийн талбар бүрийн утгыг авахын тулд объектын дэлгүүрээс өгсөн аргуудыг ашигладаг. IndexedDB-г эртнээс үзэх нь IndexedDB хэрхэн ажилладаг, IndexedDB нь Вэб SQL-тэй хэрхэн харьцуулах талаар сайн заавар юм.

Үүнийг бичиж байх үед IndexedDB нь зөвхөн Firefox 4 бета хувилбарт хэрэгжсэн бөгөөд эсрэгээр Mozilla хэзээ ч Web SQL-ийг хэрэгжүүлэхгүй гэж мэдэгджээ. Google-ийн зүгээс Chromium болон Гүүгл Кром. Майкрософт хүртэл IndexedDB бол "вэбд зориулсан гайхалтай шийдэл" гэж хэлсэн.

IndexedDB-тэй вэб хөгжүүлэгчийн хувьд та юу хийж чадах вэ? Асаалттай Энэ мөчТехнологийн зарим үзүүлэнгээс бусад нь бараг юу ч биш. Жилийн дараа? Магадгүй.

Сүүлийн шинэчлэлт: 2015/11/1

Хэдийгээр күүки мэдээлэл хадгалах боломжийг олгодог ч тодорхой хязгаарлалттай байдаг. Жишээлбэл, хөтөч нь күүкиний хэмжээгээр хязгаарлалттай байдаг - күүки тус бүр 4 КБ-аас хэтрэхгүй. Күүки нь дуусах хугацаатай бөгөөд дараа нь устгагдах болно. Күүки нь HTTP протоколын салшгүй шинж чанар бөгөөд серверт илгээсэн хүсэлт бүрийн хамт сервер рүү илгээгддэг. Гэсэн хэдий ч, клиент тал дээр JavaScript кодоор күүкитэй ажиллахын тулд күүкийг сервер рүү дамжуулах нь хамаагүй. Нэмж дурдахад, хадгалагдсан күүкиг сэргээхийн тулд та зарим код бичих хэрэгтэй.

Тиймээс HTML5-ийг нэвтрүүлсэн шинэ үзэл баримтлалөгөгдөл хадгалах зориулалттай - вэб хадгалах. Вэб санах ой нь сесс хадгалах ба дотоод санах ой гэсэн хоёр бүрэлдэхүүн хэсгээс бүрдэнэ.

Сессийн хадгалалт нь хөтчийг хаасны дараа устгагдсан мэдээллийг түр зуур хадгалах явдал юм.

Орон нутгийн санах ой нь өгөгдлийг байнгын хадгалалтаар илэрхийлдэг. Дотоод санах ойн өгөгдөл автоматаар устдаггүй бөгөөд хугацаа нь дуусдаггүй. Энэ өгөгдлийг HTTP хүсэлтийн сервер рүү илгээгээгүй. Нэмж дурдахад Chrome болон Firefox-ийн дотоод санах ойн хэмжээ нь домэйны хувьд 5 МБ, IE-д 10 МБ байна.

Вэб сан дахь бүх өгөгдөл нь түлхүүр-утга хосын багцыг илэрхийлдэг. Өөрөөр хэлбэл, объект бүр өвөрмөц түлхүүр нэр, тодорхой утгатай байдаг.

Javascript дахь локал хадгалалттай ажиллахын тулд localStorage объектыг, сессийн санах ойтой ажиллахын тулд sessionStorage объектыг ашигладаг.

Өгөгдөл хадгалахын тулд та localStorage объектын setItem() арга руу дараахыг дамжуулах шаардлагатай.

LocalStorage.setItem("нэвтрэх", " [имэйлээр хамгаалагдсан]");

Энэ арга нь түлхүүр ба хадгалагдаж буй объектын утга гэсэн хоёр утгыг дамжуулдаг.

Хэрэв localStorage-д аль хэдийн "нэвтрэх" түлхүүр бүхий объект байгаа бол түүний утгыг шинээр солино.

Хадгалсан өгөгдлийг авахын тулд та getItem() аргыг дуудах хэрэгтэй:

Var login = localStorage.getItem("нэвтрэх"); // [имэйлээр хамгаалагдсан]

Объект түлхүүрийг энэ аргад шилжүүлнэ.

Объектыг устгахын тулд устгах объектын түлхүүрийг авдаг removeItem() аргыг ашиглана:

LocalStorage.removeItem("нэвтрэх");

Мөн төлөө бүрэн арилгах localStorage-ийн бүх объектуудаас та clear() аргыг ашиглаж болно:

LocalStorage.clear();

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

LocalStorage.setItem("нас", 23); var age = localStorage.getItem("нас"); нас=parseInt(нас)+10; баримт бичиг.бичих(нас); //33

Энэ тохиолдолд parseInt() ашиглан утгыг тоо болгон хөрвүүлэхгүй бол нас нь мөрийн үүрэг гүйцэтгэнэ.

Нарийн төвөгтэй объектуудыг хадгалахад хүндрэл гарч болзошгүй:

Var хэрэглэгч =( нэр: "Том", нас: 23, гэрлэсэн: худал ); localStorage.setItem("хэрэглэгч", хэрэглэгч); var savedUser = localStorage.getItem("хэрэглэгч"); document.write(savedUser); // document.write(savedUser.name); // тодорхойгүй - savedUser нь объект биш мөр юм

Энэ тохиолдолд бид JSON формат руу цуваачлалыг ашиглах хэрэгтэй:

Var хэрэглэгч =( нэр: "Том", нас: 23, гэрлэсэн: худал ); localStorage.setItem("хэрэглэгч", JSON.stringify(хэрэглэгч)); var savedUser = JSON.parse(localStorage.getItem("хэрэглэгч")); document.write(savedUser.name + " " + savedUser.age +" " + savedUser.married); //Том 23 худал