2015-06-15 8 views
5

Czytałem książkę HTML w akcji, aw rozdziale 5 pokazano, jak utworzyć aplikację mobilną, którą można uruchomić w trybie offline. Mam tylko jedną wątpliwość: czy mogę to zrobić dla całej strony? Czy możesz dać mi prosty, ale kompletny przykład, jak to zrobić?Jak mogę użyć `localStorage` do przechowywania całej strony?

Z góry dziękuję.

+1

Spójrz na to: http://stackoverflow.com/questions/11271898/how-to-save-a-webpage-locally-including-pictures-etc – sumit

+2

Zajrzyj do [AppCaching] (https://developer.mozilla.org/en/docs/Web/HTML/Using_the_application_cache). – Xufox

+1

dla całej strony powinieneś użyć pliku manifestu. nie lokalny magazyn, jest za mały. –

Odpowiedz

6

Trochę szalony, ale można to zrobić tak:

var htmlContents = document.documentElement.innerHTML; 
localStorage.setItem('myBook', JSON.stringify(htmlContents)); 

Stamtąd można nazwać go kiedy tylko chcesz ..

localStorage.getItem('myBook'); 

Byłoby lepiej oczywiście, aby uzyskać zawartość książki oczywiście zamiast całej strony!

Co do tego, co chcesz zrobić później. Cóż, to tylko w twojej przeglądarce ... więc jest dostępna tylko dla ciebie. dla metody appCahce, zasadniczo powiesz przeglądarce odwiedzającej pliki, które chcesz przechowywać w pamięci podręcznej, aby były dostępne, gdy użytkownik jest w trybie offline.

To musi być zdefiniowana w atrybucie HTML:

<html manifest="offline_book.manifest"> 

Ten offline_book.manifest będzie zawierać listę plików do przechowywania w pamięci podręcznej.

CACHE MANIFEST 
/book_index.html 
/another_book.html 
/maybe_some_style.css 

Przez to wtedy, gdy użytkownicy wrócić do tej strony (trybie offline), będą mieli w pamięci podręcznej wersję książki zostały wymienione.

doskonałym źródłem do appCache specyfiki: Offline Webpages

+0

Czy użytkownik będzie mógł załadować całą stronę w trybie offline? – Kyle

+0

Jeśli przechowujesz javascript w swojej pamięci podręcznej, która może pobrać je podczas ładowania, to tak, oczywiście, ale najprawdopodobniej "appCaching" jest lepszym rozwiązaniem w twojej sytuacji. – Pogrindis

+1

OK, dziękuję, mam zamiar to sprawdzić :) – Kyle

1

Na przykład można użyć localStorage do zapisywania zmiennej:

// Store 
localStorage.setItem("lastname", "Smith"); 
// Retrieve 
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); 

i dostać go po:

localStorage.getItem('lastname'); 

window.localStorage realizowane interfejs obserwacji które accepted by W3C:

interface Storage { 
    readonly attribute unsigned long length; 
    [IndexGetter] DOMString key(in unsigned long index); 
    [NameGetter] DOMString getItem(in DOMString key); 
    [NameSetter] void setItem(in DOMString key, in DOMString data); 
    [NameDeleter] void removeItem(in DOMString key); 
    void clear(); 
}; 

Więcej informacji można przeczytać here

+0

Dzięki za wyjaśnienie, jak korzystać z "localStorage" +1 :) – Kyle

Powiązane problemy