1. 首页
  2. 问答
  3. 榆树中的数据持久性

榆树中的数据持久性

2015-11-13 45 views
11

我刚开始看到榆树与构建一个简单的Web应用程序的想法。我的想法需要在浏览器中保存一些用户数据。榆树中的数据持久性

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

来源

2015-11-13 marcosh

回答

3

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

来源

2015-11-13 18:03:08

+5

这个例子使用的不再使用的信号... –

13

我会建议使用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

+0

检查'localStorage.getItem（storageKey）'为空可能更容易，如果为null，则可以将调用放到'app.ports.load.send'或传递一个空字符串。 – Gira

相关问题

 相关问题