Реализация Local Storage на Jquery

Реализация Local Storage на Jquery

/**
* Storage plugin
* Provides a simple interface for storing data such as user preferences.
* Storage is useful for saving and retreiving data from the user's browser.
* For newer browsers, localStorage is used.
* If localStorage isn't supported, then cookies are used instead.
* Retrievable data is limited to the same domain as this file.
*
* Usage:
* This plugin extends jQuery by adding itself as a static method.
* $.Storage - is the class name, which represents the user's data store, whether it's cookies or local storage.
* <code>if ($.Storage)</code> will tell you if the plugin is loaded.
* $.Storage.set("name", "value") - Stores a named value in the data store.
* $.Storage.set({"name1":"value1", "name2":"value2", etc}) - Stores multiple name/value pairs in the data store.
* $.Storage.get("name") - Retrieves the value of the given name from the data store.
* $.Storage.remove("name") - Permanently deletes the name/value pair from the data store.
*
* @author Dave Schindler
*
* Distributed under the MIT License
*
* Copyright (c) 2010 Dave Schindler
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
(function($) {
// Private data
var isLS=typeof window.localStorage!=='undefined';
// Private functions
function wls(n,v){var c;if(typeof n==="string"&&typeof v==="string"){localStorage[n]=v;return true;}else if(typeof n==="object"&&typeof v==="undefined"){for(c in n){if(n.hasOwnProperty(c)){localStorage[c]=n[c];}}return true;}return false;}
function wc(n,v){var dt,e,c;dt=new Date();dt.setTime(dt.getTime()+31536000000);e="; expires="+dt.toGMTString();if(typeof n==="string"&&typeof v==="string"){document.cookie=n+"="+v+e+"; path=/";return true;}else if(typeof n==="object"&&typeof v==="undefined"){for(c in n) {if(n.hasOwnProperty(c)){document.cookie=c+"="+n[c]+e+"; path=/";}}return true;}return false;}
function rls(n){return localStorage[n];}
function rc(n){var nn, ca, i, c;nn=n+"=";ca=document.cookie.split(';');for(i=0;i<ca.length;i++){c=ca[i];while(c.charAt(0)===' '){c=c.substring(1,c.length);}if(c.indexOf(nn)===0){return c.substring(nn.length,c.length);}}return null;}
function dls(n){return delete localStorage[n];}
function dc(n){return wc(n,"",-1);}
/**
* Public API
* $.Storage - Represents the user's data store, whether it's cookies or local storage.
* $.Storage.set("name", "value") - Stores a named value in the data store.
* $.Storage.set({"name1":"value1", "name2":"value2", etc}) - Stores multiple name/value pairs in the data store.
* $.Storage.get("name") - Retrieves the value of the given name from the data store.
* $.Storage.remove("name") - Permanently deletes the name/value pair from the data store.
*/
$.extend({
Storage: {
set: isLS ? wls : wc,
get: isLS ? rls : rc,
remove: isLS ? dls :dc
}
});
})(jQuery);

Использование:

Сначала подключаем библиотеку jQuery и вышеуказанную библиотеку:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script src="jquery.Storage.js"></script>

Мы будем сохранять в браузере то, что пользователь прокомментировал:

function data_storage() { //__ read storage
    var user = $.Storage.get('user');
    var message = $.Storage.get('message');
    //__ set targets
    if (user) $('input[name="user"]').val(unescape(user));
    if (message) $('textarea[name="message"]').val(unescape(message));
    //__ write storage
    $('#comment').submit(function () {
        if ($('input[name="user"]').length)
            $.Storage.set('user', escape($('input[name="user"]').val()));
        if ($('textarea[name="message"]').length)
            $.Storage.set('message', escape($('textarea[name="message"]').val()));
    });
}
// End storage 

Для формы в HTML:

<form action="" method="post" id="comment">
  Ваше имя: <br />
  <input name="user" type="text" size="25" /><p></p>
  Сообщение: <br />
  <textarea name="message" cols="55" rows="5"></textarea><p></p>
  <input name="id" type="hidden" value="7" />
  <input name="send" type="submit" class="btn btn-default" value="Оставить отзыв" />
</form>

Проверить поддерживает ли браузер LocalStorage можно так:

function isLocalStorageAvailable() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; }} isLocalStorageAvailable();

Без Jquery можно было бы сделать так:

Сохранение данных:

localStorage.setItem('foo', 'bar');

Извлечение данных:

var foo = localStorage.getItem('foo');alert(foo); //bar

Можно использовать объектную нотацию для сохранения и извлечения данных:

localStorage['foo'] = 'bar';var foo = localStorage['foo'];alert(foo); //bar

Удаление данных:

localStorage.removeItem('foo'); //удалит элемент объектаlocalStorage.clear(); //удалит все элементы

Проверим превысили ли ограничение размера локального хранилища

try { localStorage.setItem('foo', 'bar');} catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert('Локальное хранилище переполнено'); }}

Однако так сохранять можно только строковые данные. 
Иногда требуется сохранять объекты - надо воспользоваться сериализацией:

var foo = {1: [1, 2, 3]};localStorage.setItem('foo', JSON.stringify(foo));var fooFromLS = JSON.parse(localStorage.getItem('foo'));