回答這個問題之前，我們首先要了解一下，什麼是localstorage，如何使用等問題

上圖為chrome瀏覽器的除錯頁面，我們可以輕鬆的檢視本地localstorage內儲存的資料，開啟方式：F12

什麼是localstorage?

學習過前端的朋友都知道，localStorage，是HTML5中新加入的一個特性，主要是用來作為本地儲存來使用，解決了cookie儲存空間不足的問題(cookie中每條cookie的儲存空間為4k)，localStorage中一般瀏覽器支援的是5M大小，在不同的瀏覽器中localStorage會有所不同；

localStorage是一種你不主動清除它，它會一直將儲存資料儲存在客戶端的儲存方式，即使你關閉了客戶端（瀏覽器)，屬於本地持久層儲存

localstorage的優缺點

優點：

localstorage打破了cookie的4k大小限制

localStorage會將第一次請求的資料直接儲存到本地，這個相當於一個5M大小的針對於前端頁面的資料庫

缺點：

不同版本/核心的瀏覽器對localstorage的支援不同

localStorage只能儲存字串，如果需要儲存物件，首先要轉化為字串。使用JSON.stringify()；

localStorage不能被爬蟲抓取到

localStorage本質上是對字串的讀取，如果儲存內容多的話會消耗記憶體空間，會導致頁面變卡

localStorage在瀏覽器的隱私模式下面是不可讀取的

localstorage資料是以檔案的形式儲存在本地，一般位置固定，下面是我的檔案地址：

C:\Users\admin\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb

上圖中以ldb結尾的檔案，就是我們瀏覽器儲存在localstorage的資料檔案

瞭解過HTML5的朋友或多或少都聽說過Local Storage，它是H5推出的一種本地化儲存方案。

HTML5推出Local Storage的目的是啥？

在HTML4時代，如查我們需要在本地瀏覽器中儲存一些臨時資料只能將資料儲存在Cookie中，但是Cookie技術並不是用來儲存資料的，過度使用會帶來一些問題，如：

Cookie只能儲存4K左右資料，資料容量小；

Cookie資料會附加在請求頭資訊中，較多的Cookie會影響請求速度。

為了緩解這些尷尬，HTML5就新增了一個特性：本地儲存（Local Storage）。

以Chrome為例，開啟除錯工具 》Application 》Local Storage 中即可檢視當前站點的本地儲存鍵值對。

Local Storage的本質

現在主流瀏覽器上都是以SQLite資料庫來儲存Local Storage中的K/V資料的（最終儲存在本機硬碟上）。SQLite是一款十分輕巧的關係型資料庫，它能跨平臺，另外佔用系統資源也非常低。

Local Storage儲存位置在哪？

這裡需要說明一下，不同瀏覽器對於Local Storage的支援是不同的，所以儲存位置也是不同的，甚至說相同瀏覽器在不同系統下的Local Storage儲存位置也不同。

我整理了主流瀏覽器下Local Storage的儲存位置供大家參考：

1、Chrome

Chrome下的Local Storage在硬碟上的資料庫檔名為：*.localstorage ，我們可以在電腦上搜索此檔案字尾就可以定位其位置了，如：

2、Firefox

Firefox瀏覽器下的Local Storage對應的SQLite庫檔名為：*.sqlite