Tôi chỉ mới bắt đầu nhìn vào Elm với ý tưởng xây dựng một ứng dụng web đơn giản với nó. Ý tưởng của tôi sẽ yêu cầu duy trì một số dữ liệu người dùng trong trình duyệt.Dữ liệu tồn tại trong elm
Có cách nào để xử lý dữ liệu liên tục trực tiếp với Elm không? Ví dụ trong phiên trình duyệt hoặc thậm chí lưu trữ cục bộ? Hoặc tôi nên sử dụng cổng để làm điều đó với JavaScript?
Bạn có thể xem TheSeamau5's elm-storage. Nó làm cho nó có thể lưu trữ dữ liệu trong bộ nhớ cục bộ.
Tôi khuyên bạn nên sử dụng localStorage. Không có hỗ trợ chính thức cho nó trong elm mới nhất (bởi thời gian này nó là 0,17), nhưng bạn chỉ có thể làm điều đó thông qua cổng. Đây là một ví dụ làm việc (dựa trên một ví dụ từ các tài liệu chính thức) của bằng localStorage qua cổng cho 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" ]
]
Và 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>
Bây giờ, bằng cách nhấn các nút +/- bạn thay đổi giá trị int. Khi bạn nhấn nút "lưu", ứng dụng lưu trữ giá trị thực tế vào localStorage (bằng "mã thông báo"). Sau đó thử làm mới trang và nhấn nút "tải" - nó lấy giá trị từ localStorage (bạn sẽ thấy điều khiển văn bản HTML được hiện thực hóa với giá trị được khôi phục).
Nó có thể dễ dàng hơn để kiểm tra 'localStorage.getItem (storageKey)' cho null và, trong trường hợp null, hoặc là thả cuộc gọi đến 'app.ports.load.send' hoặc truyền một chuỗi rỗng. – Gira
Câu trả lời chính thức là "cổng sử dụng" (ví dụ trên trang này về cơ bản sẽ làm việc trong 0,18) trong khi chờ đợi công bố thư viện lưu trữ địa phương chính thức Elm của: https://github.com/elm-lang/persistent-cache
Ví dụ này sử dụng tín hiệu mà không được sử dụng nữa ... –