[MST] Store Store in Local Storage

最新推荐文章于 2023-12-11 15:33:50 发布

weixin_33757911

最新推荐文章于 2023-12-11 15:33:50 发布

阅读量72

点赞数

文章标签： json

本文介绍如何使用 onSnapshot 监听状态变化，并将状态快照存储到本地存储中，确保即使在离线状态下也能提供良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

For an optimal user and developer experience, storing state in local storage is often a must.

In this lesson you will learn:

Using onSnapshot to get notified about new snapshots
Storing snapshots in local storage
Restore a state tree from local storage
Verifying whether a snapshot conforms to a model using Model.is(...)

let initialState = {
    items: [
        {
            name: "LEGO Mindstorms EV3",
            price: 349.95,
            image: "https://images-na.ssl-images-amazon.com/images/I/71CpQw%2BufNL._SL1000_.jpg"
        },
        {
            name: "Miracles - C.S. Lewis",
            price: 12.91,
            image:
                "https://images-na.ssl-images-amazon.com/images/I/51a7xaMpneL._SX329_BO1,204,203,200_.jpg"
        }
    ]
}

if (localStorage.getItem("wishlistapp")) {
    const json = JSON.parse(localStorage.getItem("wishlistapp"))
    if (WishList.is(json)) initialState = json // check whether the structure is changed or not
}

const wishList = WishList.create(initialState)

// if the snapshot changed, add to the localstorage
onSnapshot(wishList, snapshot => {
    localStorage.setItem("wishlistapp", JSON.stringify(snapshot))
})