localStorage

🎓 localStorage

Локальное хранилище данных на клиенте

Свойство глобального объекта window

Объем 5Mb

---

🎓 Методы

🔘 setItem ( key, value )

поместить данные в хранилище

localStorage.setItem ( "figure", "circle" )
localStorage.setItem ( "circle", 100 )
localStorage.setItem ( "color", "red" )

В localStorage можно хранить только строки
Поэтому для сохранения объекта нужно превратить его в строку:

var user = {
    name: "Иван",
    lastVisit: "27.02.2018",
    lastPage: "/home/page_07"
}
localStorage.setItem (
    "user",
    JSON.stringify ( user )
)

🔘 getItem ( key )

получить данные из хранилища

localStorage.getItem ( "figure" )  // "circle"
localStorage.getItem ( "circle" )  // "100"
localStorage.getItem ( "color" )   // "red"

К данным в хранилище можно получить доступ и так:

localStorage [ "figure" ]  // вернет "circle"
localStorage [ "circle" ]  // вернет "100"
localStorage [ "color" ]   // вернет "red"

Теперь, если прочитать данные их хранилища

localStorage [ "user" ]

то мы получим строку

'{ "name": "Иван", "lastVisit": "27.02.2018", "lastPage": "/home/page_07" }'

Чтобы получить объект user, нужно распарсить эту строку:

JSON.parse ( localStorage [ "user" ] )

🔘 removeItem( key )

localStorage.removeItem ( "circle" )

🔘 clear ()

очищает хранилище

🔘 key ()

☕ 1️⃣

Получим все имена ключей:

let k = 0
while ( k < localStorage.length )
    console.log ( localStorage.key( k++ ) )

☕ 2️⃣

localStorage.setItem ( "url", location.href )
var user = {
    name: prompt ( "Enter your name" ),
    last_visit: new Date().toLocaleString().split(", ")[0]
}
localStorage.setItem (
    "user",
    JSON.stringify ( user )
)

Если вывести в косоль свойства объекта localStorage:

for ( var x in localStorage ) {
    console.log ( x )
}

то в консоли мы увидим не только имена помещенных нами в хранилище данных, но и имена прототипных свойств и методов объекта localStorage:

circle
color
figure
user
length
key
getItem
setItem
removeItem
clear

☕ 3️⃣

Мы можем добавить новые методы объекту localStorage, используя свойство prototype конструктора Storage

Storage.prototype.getItemList = function () {
    for ( var x in this ) {
        console.log ( x, ": ", this [ x ] )
    }
}

Как видите, мы можем расширять функциональность объекта localStorage

🎓 Events

При изменении содержимого localStorage в браузере генерируется событие storage

Это событие может быть перехвачено объектом window, если "повесить" прослушивателя события storage:

window.addEventListener( 'storage', function(e) {  
    console.log( 'localStorage was changed from outside' )
})

Повесьте обработчика и измените содержимое localStorage в консоли