JavaScript
Pamięć internetowa

Składnia

• localStorage.setItem (nazwa, wartość);

• localStorage.getItem (name);

• localStorage.name = wartość;

• localStorage.name;

• localStorage.clear ()

• localStorage.removeItem (name);

Parametry

Uwagi

Korzystanie z localStorage

Obiekt localStorage zapewnia trwałe (ale nie trwałe - patrz ograniczenia poniżej) ciągi wartości klucza. Wszelkie zmiany są natychmiast widoczne we wszystkich innych oknach / ramkach tego samego pochodzenia. Zapamiętane wartości są trwałe przez czas nieokreślony, chyba że użytkownik wyczyści zapisane dane lub skonfiguruje limit ważności. localStorage używa interfejsu podobnego do mapy do pobierania i ustawiania wartości.

localStorage.setItem('name', "John Smith");
console.log(localStorage.getItem('name')); // "John Smith"

localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // null

Jeśli chcesz przechowywać proste dane strukturalne, możesz użyć JSON do szeregowania ich do i z ciągów do przechowywania.

var players = [{name: "Tyler", score: 22}, {name: "Ryan", score: 41}];
localStorage.setItem('players', JSON.stringify(players));

console.log(JSON.parse(localStorage.getItem('players')));
// [ Object { name: "Tyler", score: 22 }, Object { name: "Ryan", score: 41 } ]

limity localStorage w przeglądarkach

Przeglądarki mobilne:

Przeglądarki stacjonarne:

Wydarzenia pamięciowe

Ilekroć wartość ustawiona w localStorage, zdarzenie storage będzie wywoływane we wszystkich innych windows tego samego źródła. Można to wykorzystać do synchronizacji stanu między różnymi stronami bez ponownego ładowania lub komunikacji z serwerem. Na przykład możemy odzwierciedlić wartość elementu wejściowego jako tekst akapitu w innym oknie:

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

var output = document.createElement('p');
document.body.appendChild(output);

output.textContent = localStorage.getItem('user-value');

window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

Notatki

Zdarzenie nie jest uruchamiane ani wychwytywane w Chrome, Edge i Safari, jeśli domena została zmodyfikowana za pomocą skryptu.

// page url: http://sub.a.com/1.html
document.domain = 'a.com';

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

// page url: http://sub.a.com/2.html
document.domain = 'a.com';

var output = document.createElement('p');
document.body.appendChild(output);

// Listener will never called under Chrome(53), Edge and Safari(10.0).
window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

sessionStorage

Obiekt sessionStorage implementuje ten sam interfejs Storage co localStorage. Jednak zamiast udostępniać wszystkim stronom tego samego pochodzenia, dane sessionStorage są przechowywane osobno dla każdego okna / karty. Przechowywane dane są przechowywane między stronami w tym oknie / karcie tak długo, jak długo są otwarte, ale nie są widoczne nigdzie indziej.

var audio = document.querySelector('audio');

// Maintain the volume if the user clicks a link then navigates back here.
audio.volume = Number(sessionStorage.getItem('volume') || 1.0);
audio.onvolumechange = function(event) {
  sessionStorage.setItem('volume', audio.volume);
};

Zapisz dane do sessionStorage

sessionStorage.setItem('key', 'value');

Uzyskaj zapisane dane z sessionStorage

var data = sessionStorage.getItem('key');

Usuń zapisane dane z sessionStorage

sessionStorage.removeItem('key')

Czyszczenie magazynu

Aby wyczyścić pamięć, po prostu uruchom

localStorage.clear();

Warunki błędu

Większość przeglądarek skonfigurowanych do blokowania plików cookie blokuje również localStorage . Próby jego użycia spowodują wyjątek. Nie zapomnij zarządzać tymi sprawami .

var video = document.querySelector('video')
try {
    video.volume = localStorage.getItem('volume')
} catch (error) {
    alert('If you\'d like your volume saved, turn on cookies')
}
video.play()

Jeśli błąd nie zostanie obsłużony, program przestanie działać poprawnie.

Usuń element pamięci

Aby usunąć określony element z pamięci przeglądarki (odwrotnie niż setItem ), użyj removeItem

localStorage.removeItem("greet");

Przykład:

localStorage.setItem("greet", "hi");
localStorage.removeItem("greet");

console.log( localStorage.getItem("greet") ); // null

(To samo dotyczy sessionStorage )

Prostszy sposób obsługi Przechowywanie

localStorage , sessionStorage są obiektami JavaScript i można je traktować jako takie.
Zamiast używać metod przechowywania, takich jak .getItem() , .setItem() itp. .setItem() , Oto prostsza alternatywa:

// Set
localStorage.greet = "Hi!"; // Same as: window.localStorage.setItem("greet", "Hi!");

// Get
localStorage.greet;         // Same as: window.localStorage.getItem("greet");

// Remove item
delete localStorage.greet;  // Same as: window.localStorage.removeItem("greet");

// Clear storage
localStorage.clear();

Przykład:

// Store values (Strings, Numbers)
localStorage.hello = "Hello";
localStorage.year  = 2017;    

// Store complex data (Objects, Arrays)
var user = {name:"John", surname:"Doe", books:["A","B"]};
localStorage.user = JSON.stringify( user );

// Important: Numbers are stored as String
console.log( typeof localStorage.year ); // String

// Retrieve values
var someYear = localStorage.year; // "2017"

// Retrieve complex data
var userData = JSON.parse( localStorage.user );
var userName = userData.name; // "John"

// Remove specific data
delete localStorage.year; 

// Clear (delete) all stored data
localStorage.clear();

localStorage length

Właściwość localStorage.length zwraca liczbę całkowitą wskazującą liczbę elementów w localStorage

Przykład:

Ustaw przedmioty

localStorage.setItem('StackOverflow', 'Documentation');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'sprite.svg');

Uzyskaj długość

localStorage.length; // 3