快捷導(dǎo)航

JS localStorage存儲對象，sessionStorage存儲數(shù)組對象操作示例

更新時間：2020年02月15日 12:27:00 作者：聽風(fēng)是風(fēng)

這篇文章主要介紹了JS localStorage存儲對象，sessionStorage存儲數(shù)組對象操作,結(jié)合實例形式詳細(xì)分析了JS使用localStorage存儲對象以及sessionStorage存儲數(shù)組對象相關(guān)操作技巧與注意事項,需要的朋友可以參考下

本文實例講述了JS localStorage存儲對象，sessionStorage存儲數(shù)組對象操作。分享給大家供大家參考，具體如下：

一、前言

最近在用angular做商城購物車的功能模塊，因為angular的watch監(jiān)聽，數(shù)據(jù)只要發(fā)生變化就能很方便的自動渲染頁面。但隨即出現(xiàn)的問題是，之前用戶操作的樣式都會被重置掉。

例如我勾選了幾個商品準(zhǔn)備結(jié)算，又修改了商品數(shù)量，這時候發(fā)起了請求，頁面數(shù)據(jù)被渲染，打鉤的商品全被恢復(fù)未選中。

想著將所有選中商品的獨有Id存入數(shù)組，利用localStorage存儲，每次刷新都取到存儲的數(shù)組，將數(shù)組對應(yīng)Id的商品再次勾上。結(jié)果出現(xiàn)了下面的問題：

var a = [1,2,3];
window.localStorage.setItem('key',a);
var b = window.localStorage.getItem('key');
console.log(b,typeof b);//1,2,3  string

很明顯，數(shù)組存進去直接被強轉(zhuǎn)為了字符串類型，這明顯不是我想要的，查了下，可以利用json.stringify與JSON.parse的轉(zhuǎn)換達到目的。

二、存儲數(shù)組

json.stringify可以將對象轉(zhuǎn)換為 JSON 字符串

JSON.parse可以將 JSON 字符串轉(zhuǎn)換為對象

那我們存的時候先將數(shù)組轉(zhuǎn)成JSON字符串，取出來再轉(zhuǎn)成數(shù)組就可以了，實現(xiàn)如下。

function storageObj(obj) {
  var checkedIdStr = JSON.stringify(obj);
  sessionStorage.setItem("key", checkedIdStr);
};
var arrBefor = [1,2,3];
storageObj(arrBefor);
var arrAfter = JSON.parse(sessionStorage.getItem("key"));
console.log(arrAfter,typeof arrAfter);//[1, 2, 3] "object"

三、存儲對象

function storageObj(obj) {
  var checkedIdStr = JSON.stringify(obj);
  sessionStorage.setItem("key", checkedIdStr);
};
var objBefor = {
  a:1,
  b:2
};
storageObj(objBefor);
var objAfter = JSON.parse(sessionStorage.getItem("key"));
console.log(objAfter,typeof objAfter);//{a: 1, b: 2} "object"

利用JSON轉(zhuǎn)換值達到存儲的的方式非常好用，除此之外JSON的方法還能用于深拷貝

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: