npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

elm-localstorage-ports

0.1.1 • Public • Published

Elm LocalStorage Ports

Interface with LocalStorage in Elm.

Quick Start

1. Copy LocalStorage.elm into your Elm project

$ npm install -g elm-localstorage-ports
$ cd /path/to/elm/project
$ elm-localstorage-ports init

You will be asked,

Are you inside one of the "source-directories" from your project's elm-package.json? (y/n)

Type y and elm-localstorage-ports will create all of the necessary Elm files.

Note: elm-localstorage-ports init must be run from a directory in the "source-directories\" array in your project's elm-package.json. The above commands assume that /path/to/elm/project is the path containing elm-package.json, and that you have not modified "source-directories".

2. Use it in your Elm code

Example

module MyElmApp.App exposing (main)
 
 
import Json.Decode as JD
import Ports.LocalStorage as LocalStorage
 
 
type Msg
  = SaveToLocalStorage String
  | LoadFromStorage
  | ReceiveFromLocalStorage (LocalStorage.Key, LocalStorage.Value)
 
 
type alias Model =
  { favoriteFruit : String }
 
  -- ...
 
subscriptions : Model -> Sub Msg
subscriptions model =
  LocalStorage.storageGetItemResponse ReceiveFromLocalStorage
 
-- ...
 
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    SaveToLocalStorage fruit ->
      ( { model | favoriteFruit = fruit }
      , LocalStorage.storageSetItem ("favoriteFruit", fruit)
      )
 
    LoadFromStorage ->
      (model, LocalStorage.storageGetItem "favoriteFruit")
 
    ReceiveFromLocalStorage ("favoriteFruit", value) ->
      case JD.decodeValue JD.string value of
        Ok fruit ->
          { model | favoriteFruit = fruit } ! []
 
        Err _ ->
          model ! []
 
-- ...

3. Register your Elm app in JavaScript

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

API Reference

View the full API reference here.

Questions or Problems?

Feel free to create an issue in the GitHub issue tracker.

install

npm i elm-localstorage-ports

Downloadsweekly downloads

1

version

0.1.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability