Node-RED ローカルストレージに保存

# はじめに

Node-REDで[localStorage](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage)に保存する方法についてまとめました。

localStorageはHTML5から導入されたブラウザAPIのひとつで、アクセスしたブラウザ内にデータを記録できる仕組みです。[node-red-contrib-localstorage](https://flows.nodered.org/node/node-red-contrib-localstorage)を使うと、FlowEditorでアクセスしたブラウザ内に値を保存し取り出すことができます。

localStorageのset Itemで保存した値は、同じ端末の同じブラウザからFlowEditorにアクセスすることでget Itemすることができますが、異なる端末でFlowEditorにアクセスした場合はget Itemすることができません。

ブラウザ側でなくサーバ側にデータを永続したい場合は、Flow/Globalコンテキストやfile-in/file-outノードなどを使います。


# ライブラリを追加

右上のメニュー→パレットの管理からライブラリを追加します。

`node-red-contrib-localstorage`


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/f5ee6966-b7f6-5a4a-3fe3-350806531c4c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/868df842-f934-2d60-f0b4-9e8afb14ca7f.png)

追加されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/26a9d380-52c2-5175-d1b9-9fff603213ef.png)


# 使い方

ノードを追加します。（コピー用ノードをこのページの最後に置いてます。）
・injectノード
・set itemノード
・get itemノード
・表示用debugノード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/c114dd22-3747-64f3-1d10-3c8b377c5cf3.png)

新規にLocalStorageを追加する。（名前はtestとしました。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/db33a4e4-257c-6f54-3582-9d9d5cfd3e8b.png)


SET側のINJECT(タイムスタンプ)ノード
・key,valueをJSON形式で指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/1904b592-0614-4d12-d46e-9e14e11655b8.png)

GET側のINJECT(タイムスタンプ)ノード
・KeyをJSON形式で指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/bdfa243b-f75d-a42a-2c36-79c84192599e.png)


デプロイして実行し、以下のように出力されていればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/54a83132-9699-d19f-a947-e5e3ec34e546.png)




~~~Text:コピー用ノード
[
    {
        "id": "22098741880fbbc0",
        "type": "set item",
        "z": "f6f2187d.f17ca8",
        "name": "",
        "localStorage": "dd45904cca714139",
        "x": 540,
        "y": 660,
        "wires": [
            [
                "f57ac9d046820304"
            ]
        ]
    },
    {
        "id": "f6491be97d8be795",
        "type": "get item",
        "z": "f6f2187d.f17ca8",
        "name": "",
        "localStorage": "dd45904cca714139",
        "x": 540,
        "y": 720,
        "wires": [
            [
                "f57ac9d046820304"
            ]
        ]
    },
    {
        "id": "c7b5e98e234545a7",
        "type": "inject",
        "z": "f6f2187d.f17ca8",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "localStorage",
                "v": "{\"key\":\"test\",\"value\":\"test value\"}",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 360,
        "y": 660,
        "wires": [
            [
                "22098741880fbbc0"
            ]
        ]
    },
    {
        "id": "8964daaa9471d51f",
        "type": "inject",
        "z": "f6f2187d.f17ca8",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "localStorage",
                "v": "{\"key\":\"test\"}",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 360,
        "y": 720,
        "wires": [
            [
                "f6491be97d8be795"
            ]
        ]
    },
    {
        "id": "f57ac9d046820304",
        "type": "debug",
        "z": "f6f2187d.f17ca8",
        "name": "debug msg",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 770,
        "y": 700,
        "wires": []
    },
    {
        "id": "dd45904cca714139",
        "type": "local-storage",
        "name": "test"
    }
]
~~~

# 参考ページ

https://flows.nodered.org/node/node-red-contrib-localstorage