Подтвердить что ты не робот

Сохранение данных в вяз

Я только начинаю смотреть на Elm с идеей создания с ним простого веб-приложения. Моя идея потребовала бы сохранить некоторые пользовательские данные в браузере.

Есть ли способ перенести данных непосредственно с Elm? Например, в сеансе браузера или даже в локальном хранилище? Или я должен использовать порты для этого с помощью JavaScript?

4b9b3361

ОТВЕТЫ

Ответ 2

Я бы предложил использовать localStorage. Официальной поддержки в последнем вязе нет (к этому времени это 0.17), но вы можете просто сделать это через порты. Это рабочий пример (на основе примера из официальных документов) использования localStorage через порты для вяза 0.17

port module Main exposing (..)

import Html exposing (Html, button, div, text, br)
import Html.App as App
import Html.Events exposing (onClick)
import String exposing (toInt)

main : Program Never
main = App.program
  {
    init = init
  , view = view
  , update = update
  , subscriptions = subscriptions
  }

type alias Model = Int

init : (Model, Cmd Msg)
init = (0, Cmd.none)

subscriptions : Model -> Sub Msg
subscriptions model = load Load

type Msg = Increment | Decrement | Save | Doload | Load String

port save : String -> Cmd msg
port load : (String -> msg) -> Sub msg
port doload : () -> Cmd msg

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of
      Increment ->
        ( model + 1, Cmd.none )
      Decrement ->
        ( model - 1, Cmd.none )
      Save ->
        ( model, save (toString model) )
      Doload ->
        ( model, doload () )
Load value ->
        case toInt value of
          Err msg ->
            ( 0, Cmd.none )
          Ok val ->
            ( val, Cmd.none )

view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    , br [] []
    , button [ onClick Save ] [ text "save" ]
    , br [] []
    , button [ onClick Doload ] [ text "load" ]
    ]

И index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="js/elm.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
    var storageKey = "token";
    var app = Elm.Main.fullscreen();
    app.ports.save.subscribe(function(value) {
      localStorage.setItem(storageKey, value);
    });
    app.ports.doload.subscribe(function() {
      app.ports.load.send(localStorage.getItem(storageKey));
    });
</script>
</html>

Теперь, нажимая кнопки + / -, вы меняете значение int. Когда вы нажимаете кнопку "Сохранить", приложение сохраняет фактическое значение в localStorage (клавишей "токен"). Затем попробуйте обновить страницу и нажать кнопку "загрузить" - она возвращает значение из localStorage (вы должны увидеть, что текстовое управление HTML реализовано с восстановленным значением).

Ответ 3

Официальным ответом является "использование портов" (пример на этой странице должен в основном работать в 0,18), ожидая публикации официальной локальной библиотеки хранения Elm: https://github.com/elm-lang/persistent-cache