記錄在使用localStorage過程中遇到的問題和解決

問題：使用EChart動態繪制多折線圖：每一次通過Ajax請求，后端返回一組數據，在同一個坐標系中渲染；

如果按照基本的操作，一組后端數據對應前端一條曲線，而且，每當后面返回數據之后，前面的曲線就會被覆蓋掉，

所以，問題來了，怎么才能，讓所有的曲線都能保留在同一個坐標系中，方便多條曲線進行對比？

解決：

方法一：在后端處理，想到了使用將每次的數據再傳回后端，並保存在數據庫中，前端請求的時候，去數據庫中讀取，分析之后，效率太低，沒有采用。

方法二：在前端處理，將之前的數據，保留在前端localStorage中，每次渲染新的曲線，將之前的數據都拿出來，整合之后（因為，每次請求的數據長度不定），進行新的渲染。

經試驗之后，方法二，還是能滿足需求。

但是查閱，localStorage的使用，總結如下：

window.localStorage存儲的數據保存在瀏覽器會話中。localStorage 類似 sessionStorage，但其區別在於：存儲在 localStorage 的數據可以長期保留；而當頁面被關閉時，存儲在 sessionStorage 的數據會被清除 。

無論數據存儲在 localStorage 還是 sessionStorage ，它們都特定於頁面的協議。

另外，localStorage 中的鍵值對總是以字符串的形式存儲。 (需要注意, 和js對象相比, 鍵值對總是以字符串的形式存儲意味着數值類型會自動轉化為字符串類型).

常見的方法：

①clear（）：刪除所有值。

②getItem（name）：根據指定的名字name獲取對應的值

③key(index)：在指定的數字位置獲取該位置的名字。

④removeItem（name）：刪除由name指定的名值對

⑤setItem(name,value)：為指定名字設置一個對應的值

使用sessionStorage和localStorage的好處是：

（1）緩存數據

（2）減少對內存的占用。

發現了問題：當我們都需要保存一些對象類型的數據，字符串類型的數據就滿足不了需求。

就有了怎么將字符串數據類型轉化為對象數據類型：

var obj = { name:'Jim' };
var str = JSON.stringify(obj); 
//存入
sessionStorage.obj = str;
//讀取
str = sessionStorage.obj;
//重新轉換為對象
obj = JSON.parse(str);
localStorage也一樣，只是和sessionStorage的存儲時間不一樣。
//需要注意的是，JS中的數組本質上也是對象類型，所以上面的代碼對數組也是適用的。
var arra=[1,2,3,4];
localStorage.setItem('key',JSON.stringify(arra));
var read=JSON.parse(localStorage.getItem('key'));
console.log(read,read.length);

詳細的使用方法可以參見：https://www.html.cn/qa/javascript/19942.html