elm-local-storage-ports's Introduction

Elm LocalStorage Ports

Interface with LocalStorage in Elm.

Quick Start

1. Install via NPM

$ npm install --save elm-local-storage-ports

2. In `elm-package.json`, import `Ports/LocalStorage.elm`

Add node_modules/elm-local-storage-ports/lib/elm to your source-directories:

// elm-package.json

{
    // ...

    "source-directories": [
        "../../node_modules/elm-local-storage-ports/lib/elm", // Exact path to node_modules may be different for you
        "./"
    ],

    // ...
}

3. Use it in your Elm code

type Msg
  = SaveSearch String
  | RequestLastSearch
  | ReceiveFromLocalStorage (String, Json.Decode.Value)


subscriptions : Model -> Sub Msg
subscriptions model =
  Ports.LocalStorage.storageGetItemResponse ReceiveFromLocalStorage


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    SaveSearch searchQuery ->
      ( model
      , Ports.LocalStorage.storageSetItem ("lastSearch", Json.Encode.string searchQuery)
      )

    RequestLastSearch ->
      (model, Ports.LocalStorage.storageGetItem "lastSearch")

    ReceiveFromLocalStorage ("lastSearch", value) ->
      case JD.decodeValue JD.string value of
        Ok searchQuery ->
          -- Do something with searchQuery

4. Register your Elm app in JavaScript

Using Elm Router

var localStoragePorts = require('elm-local-storage-ports');
elmRouter.start(Elm, [localStoragePorts]);

Without Elm Router

var localStoragePorts = require("elm-local-storage-ports");
var myElmApp = Elm.MyElmApp.embed(document.getElementById("my-elm-app-container"));

localStoragePorts.register(myElmApp.ports);