[MST] Store Store in Local Storage
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))
})
[MST] Store Store in Local Storage的更多相关文章
- html5本地存储 local storage
HTML5 web storage, a better local storage than cookies. With HTML5, web pages can store data locally ...
- HTML5本地存储(Local Storage) 的前世今生
长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...
- 每日技术总结:promise,express route,评分,local storage商品浏览历史,
最近正在用Vue做一个电商项目.利用工作前后空隙时间. 1.promise的使用 点这里 如何在实际项目中使用Promise 2. Express Route 前后端传参的两种方法 (1)req.pa ...
- Ionic2学习笔记(8):Local Storage& SQLite
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html Ionic2可以有两种方式来存储数据,Local S ...
- Web持久化存储Web SQL、Local Storage、Cookies(常用)
在浏览器客户端记录一些信息,有三种常用的Web数据持久化存储的方式,分别是Web SQL.Local Storage.Cookies. Web SQL 作为html5本地数据库,可通过一套API来操纵 ...
- cookie ,session Storage, local storage
先来定义: cookie:是网站为了标识用户身份存储在本地终端的数据,其数据始终在APP请求中存在,会在服务器和浏览器中来回传递 数据大小不超过4k, 可以设置有效期,过了有效期自动删除 sessio ...
- Session,Cookie 和local storage的区别
以前从没有听说过local storage, 在网上查了一些资料,得到如下结论 从存储位置看,分为服务器端存储和客户端存储两种 服务器端: session 浏览器端: cookie, localSto ...
- 关于local storage及session storage 应用问题
H5- storage 可以在不同页面内进行数据传递数据信息,保证了数据传输不许后台交互即可在前端部分自我实现,以下为local storage 应用个人简析: * localStorage * se ...
- 关于local storage 和 session storage以及cookie 区别简析
session storage 和local storage 都是存储在客户端的浏览器内: 一:关于COOKIE 的缺陷 * Cookie的问题 * 数据存储都是以明文(未加密)方式进行存储 * 安全 ...
随机推荐
- java拷贝字符文件
1.java拷贝字符文件 2.代码如下: package Demo1; import java.io.*; public class copyfile { public static void mai ...
- NYIST 749 蚂蚁的难题(八)
蚂蚁的难题(八)时间限制:2000 ms | 内存限制:65535 KB难度:5 描述蚂蚁是一个古玩爱好者,他收藏了很多瓶瓶罐罐. 有一天,他要将他的宝贝们一字排开, 摆放到一个长度为L的展台上. 已 ...
- angular-模块Module
模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. <div ng-app="myApp" runoob-dire ...
- JDK+JDBC+MySQL实例及注意事项
by qx.zhong Hangzhou 29 Jun 2014 开发环境 OS: Win8.1 x64 JDK: 1.8 SE DB: MySQL 5.5 Lib: mysql-connec ...
- 【万里征程——Windows App开发】控件大集合2
以下再来看看一些前面还没有讲过的控件,只是控件太多以至于无法所有列出来,大家仅仅好举一反三啦. Button 前面最经常使用的控件就是Button啦,Button另一个有意思的属性呢.当把鼠标指针放在 ...
- 少年 DXH
少年 DXH 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描写叙述 大家都知道,DXH 幼时性格怪癖,小朋友都不喜欢和他玩,这样的情况一直到 DXH 的少年时期也没有改变. ...
- C++模板中的静态
#include <iostream> #include <stdlib.h> using namespace std; template<class T> cla ...
- AJAX入门---点滴的积累
AJAX入门---点滴的积累 每次学习完一个内容总会写上几句话总结一下学习的内容.这不刚看完王兴魁老师讲的AJAX核心技术.如今回想梳理一下. 这套视频的内容不多,简单的解说了XMLHttpReque ...
- poj--2549--Sumsets(二分查找)
Sumsets Time Limit: 1000MS Memory Limit: 65536KB 64bit IO Format: %I64d & %I64u Submit Statu ...
- 一个比NPM更快更安全可靠的JavaScript包管理工具——Yarn
yarn安装: npm intall -g yarn 查看安装是否成功: yarn -v yarn常用的命令以及和npm的对照如下: 更详细的请查看官方文档