Piotr Leniec
"Cookies, Web Storage i IndexedDB. Co, gdzie i jak?" [PL]
2018-04-11
O mnie:
- Vice President of Engineering w Spark Solutions
- Development - Ruby & JavaScript
- Rekrutacja
- Pomoc
- Zarządzanie projektami
- leniec.com
JS Cookies API
console.log(document.cookie) // "a=1; b=2; c=3"
document.cookie = 'd=4'
const expires = new Date(0).toString()
document.cookie = 'b=;expires=' + expires
Problemy z ciastkami
- Beznadziejne API
- Są wysyłane do serwera z każdym żądaniem
- Luki bezpieczeństwa (CSRF, XSS)
- Limity (4kb)
Kiedy używać ciastek
- Jako tracker (lepsze od DOM Storage)
- Do przechowywania sesji użytkownika
- Do przechowywania różnych tokenów obsługiwanych przez backend
Kiedy nie używać ciastek
- Do cachowania
- Do zapisywania stanu interfejsu
- W JS
Local Storage & Session Storage
- Local Storage i Session Storage mają taki sam interfejs
- Local Storage przechowuje dane aż do usunięcia (nie ma terminu wygaśnięcia)
- Session Storage przechowuje dane przechowuje dane na czas trwania sesji (aż do zamknięcia taba)
- Każda przeglądarka ma swój limit (2MB, 5MB, 10MB)
DOM Storage API
localStorage.setItem('a', 'b')
localStorage.getItem('a') // 'b'
localStorage.removeItem('a')
localStorage.getItem('a') // null
DOM Storage API
localStorage.a = 'b'
localStorage.a // 'b'
delete localStorage.a
localStorage.a // undefined
DOM Storage API
const object = { a: 1, b: 2, c: 3 }
localStorage.setItem('object', object)
localStorage.getItem('object') // "[object Object]"
DOM Storage API
let object = { a: 1, b: 2, c: 3 }
let objectString = JSON.stringify(object)
localStorage.setItem('object', objectString)
objectString = localStorage.getItem('object')
JSON.parse(objectString) // { a: 1, b: 2, c: 3 }
Co przechowywać w DOM Storage
- Stan interfejsu
- Wartości formularzy (logowanie się, GitHub)
- Tokeny używane przez JS (JWT, api tokens)
Czego nie przechowywać w DOM Storage
- Rzeczy które są potrzebne w Web albo Service Workerze
- Bloby
- Kolekcje danych
WebSQL API
const size = 5*1024*1024
const db = window.openDatabase("name", "1.0", "description", size)
db.executeSql('SELECT * FROM users', onSuccess, onError)
db.transaction(tx => {
tx.executeSql('INSERT INTO users(name) VALUES(?)', ['Pete'])
tx.executeSql('INSERT INTO users(name) VALUES(?)', ['Paul'])
}, onTransactionError, onTransactionSuccess)
IndexedDB API
const open = indexedDB.open('dbname', 3)
open.onupgradeneeded = (event) => {
if (event.oldVersion < 1) {
// create v1 schema
}
if (event.oldVersion < 2) {
// upgrade v1 to v2 schema
}
}
IndexedDB API
const tx = db.transaction(['Users'], 'readwrite')
const store = tx.objectStore('Users')
store.put({ id: 1, name: 'John Doe' })
store.put({ id: 2, name: 'Jane Doe' })
IndexedDB API
const tx = db.transaction(['Users'], 'readonly')
const store = tx.objectStore('Users')
const getJohn = store.get(1)
getJohn.onsuccess = () => {
getJohn.result // { id: 1, name: 'John Doe' }
}
IndexedDB API
const tx = db.transaction(['Users'], 'readwrite')
const store = tx.objectStore('Users')
store.delete(1)
Co przechowywać w IndexedDB
- Kolekcje danych
- Dane binarne
- Odpowiedzi zapytań (offline first)
Czego nie przechowywać w IndexedDB
- Proste dane
- Wszystko co moglibyśmy przechować w cookies lub DOM Storage
