榆樹中的數據持久性

我剛開始看到榆樹與構建一個簡單的Web應用程序的想法。我的想法需要在瀏覽器中保存一些用戶數據。榆樹中的數據持久性

有沒有辦法直接用Elm處理數據持久性？例如在瀏覽器會話甚至本地存儲？或者我應該使用端口來使用JavaScript來完成它？

來源

2015-11-13 marcosh

你可以看看TheSeamau5's elm-storage。它可以將數據存儲在本地存儲中。

來源

2015-11-13 18:03:08

這個例子使用的不再使用的信號... –

我會建議使用localStorage。在最新的elm中沒有官方的支持（到現在爲0.17），但你可以簡單地通過ports來完成。這是通過端口使用本地存儲爲榆樹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>

現在，請按按鈕+/-你改變整型值。當你按下「保存」按鈕時，應用程序將實際值存儲到localStorage中（通過「token」鍵）。然後嘗試刷新頁面並按下「加載」按鈕 - 它從localStorage取回值（您應該看到用恢復的值實現的HTML文本控件）。

來源

2016-08-26 20:27:16 fycth

檢查'localStorage.getItem（storageKey）'爲空可能更容易，如果爲null，則可以將調用放到'app.ports.load.send'或傳遞一個空字符串。 – Gira

官方答案是「使用的端口」（例如這個頁面上應在0.18的基本工作原理），而等待榆木的官方本地存儲庫的刊物：https://github.com/elm-lang/persistent-cache

來源

2017-07-04 08:52:08

榆樹中的數據持久性

回答

相關問題