elm中的本地存储或其他数据持久性
我刚刚开始研究Elm，并打算用它构建一个简单的web应用程序。我的想法是在浏览器中保存一些用户数据elm中的本地存储或其他数据持久性,elm,Elm,我刚刚开始研究Elm，并打算用它构建一个简单的web应用程序。我的想法是在浏览器中保存一些用户数据 有没有一种直接使用Elm处理数据持久性的方法？例如，在浏览器会话中，甚至在本地存储中？或者我应该使用端口来使用JavaScript吗？您可以看看。它使在本地存储中存储数据成为可能。我建议使用本地存储。在最新的elm中没有对它的官方支持（此时它是0.17），但是您可以通过端口简单地实现它。这是一个通过elm 0.17的端口使用localStorage的工作示例（基于官方文档中的示例） port mo
有没有一种直接使用Elm处理数据持久性的方法？例如，在浏览器会话中，甚至在本地存储中？或者我应该使用端口来使用JavaScript吗？您可以看看。它使在本地存储中存储数据成为可能。我建议使用本地存储。在最新的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" ]
]
<!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>
var storageKey=“令牌”；
var app=Elm.Main.fullscreen（）；
app.ports.save.subscribe（函数值）{
setItem（storageKey，value）；
});
app.ports.doload.subscribe（函数（）{
app.ports.load.send（localStorage.getItem（storageKey））；
});
现在，通过按下+/-按钮，您可以更改int值。当您按下“保存”按钮时，应用程序将实际值存储到本地存储中（通过“令牌”键）。然后尝试刷新页面并按下“加载”按钮-它从本地存储中获取值（您应该看到HTML文本控件使用还原的值实现）。官方答案是“使用端口”（适用于0.18-0.19.1）在等待重新发布Elm的官方本地存储库时：可能更容易检查
localStorage.getItem（storageKey）app.ports.load.send