榆树中的本地存储或其他数据持久性

Question

我刚刚开始关注 Elm，并想用它构建一个简单的 Web 应用程序。我的想法是需要在浏览器中保留一些用户数据。

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

Answer 1

你可以看看TheSeamau5's elm-storage。它使得在本地存储中存储数据成为可能。

Answer 2

我建议使用 localStorage。在最新的 elm 中没有对它的官方支持（此时它是 0.17），但你可以简单地通过端口来实现。这是一个通过 elm 0.17

端口使用 localStorage 的工作示例（基于官方文档中的示例）

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 值。当您按下 "save" 按钮时，应用程序会将实际值存储到 localStorage（通过 "token" 键）。然后尝试刷新页面并按 "load" 按钮 - 它从 localStorage 取回值（您应该看到 HTML 文本控件使用恢复的值实现）。

Answer 3

官方回答是"use ports"（for 0.18 - 0.19.1）等待Elm官方本地存储库重新发布：https://github.com/elm-lang/persistent-cache

榆树中的本地存储或其他数据持久性

Local Storage or other data persistence in elm

elm