Pokazywanie postów oznaczonych etykietą Html. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą Html. Pokaż wszystkie posty

niedziela, 14 sierpnia 2016

HTML 5 Local Storage vs Cookies

While I was solving Weekly Javascript Chalange Task 3 I ask my self a quite interesting question. What is a difference between Local Storage and Cookies?
Somebody already asked that question on SO:  http://stackoverflow.com/questions/3220660/local-storage-vs-cookies ,and there is a very good answer:

Cookies and local storage serve different purposes. Cookies are primarily for reading server-side, local storage can only be read client-side. So the question is, in your app, who needs this data — the client or the server?
If it's your client (your JavaScript), then by all means switch. You're wasting bandwidth by sending all the data in each HTTP header.
If it's your server, local storage isn't so useful because you'd have to forward the data along somehow (with Ajax or hidden form fields or something). This might be okay if the server only needs a small subset of the total data for each request.
You'll want to leave your session cookie as a cookie either way though.
As per the technical difference, and also my understanding:
  1. Apart from being an old way of saving data, Cookies give you a limit of 4096 bytes (4095, actually) - its per cookie. Local Storage is as big as 5MB per domain - SO Question also mentions it
  2. localStorage is an implementation of the Storage Interface. It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry.

 Why I mention about it? For two reasons:
a) I use this blog as my notepad, that I sometimes visit
b) this question have a great "interview question" potential



piątek, 16 stycznia 2015

NancyFx Razor Wiele przycisków na jednej stronie (Multiple submit on one form)

Jeżeli zdecydujemy się porzucić stare "web.form" i w warstwie widoku przejść na syntaks Razor, to wtedy spotykamy się z problemem "wiele akcji w jednej formie". O ile podstawowa implementacja wygląda mniej więcej tak:

                <form name="xyzForm" id="xyzForm" class="xyzForm" action="/" method="post">
<input type="submit" value="Generuj raport" id="btnGenerate" class="btnGenerate" />
                </form>

Ten syntaks oznacza, że każde naciśnięcie każdego przycisku (input type="submit") wewnątrz tego form'a spowoduje wywołanie akcji kontrolera:        
        public MainModule(IDataStore dataStore)
        {
            Post["/"] = parameters =>
            {
                 return null;
            };
        }

A co jeśli chcemy, mieć kilka przycisków w jednej formie, odpowiedzialnych za kilka osobnych akcji? Z NancyFx oraz drobną pomocą Ajax'a nie stanowi to żadnego problemu:


                 <form name="xyzForm" id="xyzForm" class="xyzForm" action="/" method="post">
<input type="submit" value="Generuj raport" id="btnGenerate" class="btnGenerate" />
                    <input id="saveReportSpec" type="button" value="Zapisz ustawienia raportu dla klienta" onclick="saveReportSpecJs(); return false;" />
                </form>

        <script type="text/javascript">
            function saveReportSpecJs() {
                var $formData = $('#xyzForm').serialize();

                $.post('/Ajax/SaveReportSpec/', $formData, function (data) 
               {
              //TODO: jeżeli metoda coś zwraca, to tutaj działamy na 'data.'
                }
               );
            }

W przypadku html-a niewiele się zmieniło (dodaliśmy nowy przycisk, tym razem typu button) oraz ustawiliśmy wywoływanie javascriptu pod zdarzeniem "onClick".
Sam javascript, wywołuje nasz kontroler. Co ważne, jako parametr podajemy zserioalizowany formularz (form), dzięki któremu będziemy mogli później w osobnym kontrolerze posługiwać się danymi z formularza.
Prosty kod Modułu (kontrolera) dla tej akcji.

        public AjaxModule(IDataStore dataStore) : base("Ajax")
        {
            Post["/SaveReportSpec"] = _ =>
            {
                return null;
            }
        }

Jako parametr przekazujemy zserializowaną formę, abyśmy później mogli korzystać w kontrolerze z danych zawartych w formie, np.:

<input id="cbXYZ" name="cbXYZ" type="checkbox" />

Odczytujemy za pomocą:

            var cbXYZ= Request.Form.cbXYZ;