Как сохранить изображения при навигации в Angular SPA?

Question

Я использую роутер Angular для навигации между компонентами, подумал, когда я вернусь, компоненты перезагрузятся. Я решил проблему с контентом, сохранив массив контента в сервисе и загрузив его оттуда, чтобы он не вызывал сервер каждый раз. Но я не знаю, что делать с изображениями, они принимаются с сервера в виде строки base64, а затем показываются на изображении, но как мне их кешировать / сохранить или в каком виде я должен хранить их в памяти, чтобы мгновенно загрузить их снова при переходе обратно к компоненту, который их содержит? Я посмотрел в Интернете, но не знал, какие термины использовать для поиска решения.

Answer 1

Компонентом, который вы ищете, является sessionStorage или localStorage (вы также можете поиграть с куки, но я считаю, что ранее упомянутые способы проще в использовании):

• Сессия: Хранится до тех пор, пока не откроется окно браузера
• Локально: сохраняется, даже когда браузер закрыт.

Независимо от того, какой тип этих хранилищ вы используете, содержащиеся в них данные фактически одинаковы. , состоящий из ключ-значение пар.

---

localStorage и sessionStorage не являются встроенными Angular функциями, вы можете себе это представить больше похоже на API, предоставляемый Java / TypeScript . Чтобы получить подробное описание этого API, взгляните на здесь и здесь .

---

Вы можете легко увидеть, что веб-сайт хранит на вашей машине: нажимая F12 и перемещаясь в опциях разработчика.

---

Я создал простой пример здесь .