Question

我刚刚开始考虑使用它构建一个简单的Web应用程序。我的想法是要求在浏览器中保留一些用户数据。

有没有办法直接使用Elm处理数据持久性？例如在浏览器会话甚至本地存储中？或者我应该使用端口来使用JavaScript吗？

Answer 1

我建议使用localStorage。在最新的榆树中没有官方支持（此时它是0.17），但你可以通过端口进行。这是一个工作示例（基于官方文档的示例）使用localStorage通过端口为elm 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值。当您按＆＃34;保存＆＃34;按钮，应用程序将实际值存储到localStorage（通过＆＃34;令牌＆＃34;键）。然后尝试刷新页面并按＆＃34;加载＆＃34;按钮 - 它从localStorage返回值（您应该看到使用恢复的值实现的HTML文本控件）。

Answer 2

您可以查看TheSeamau5's elm-storage。它可以将数据存储在本地存储中。

Answer 3

官方答案是＆＃34;使用端口＆＃34; （在此页面上的示例基本上应该在0.18中工作）等待Elm的官方本地存储库的发布：https://github.com/elm-lang/persistent-cache

榆树中的数据持久性

3 个答案: