Передовая технология хранения

внешний интерфейс

предисловие

Внутренняя база данных обычно используется для хранения данных, напримерMySql,MongoDB, технология кэширования для хранения таких данных, какRedis,Memcached;

Данные внешнего хранилища в настоящее время обычно используются вCookie,Storage,IndexedDB

Cookie

HTTP Cookie(Также известен какWeb Cookieили браузерCookie) — это небольшой фрагмент данных, который сервер отправляет браузеру пользователя и сохраняет его локально. Он будет перенесен и отправлен на сервер в следующий раз, когда браузер сделает запрос к тому же серверу. Обычно он используется, чтобы сообщить серверу, исходят ли два запроса от одного и того же браузера, например, чтобы пользователь оставался в системе.Cookieсделать без гражданства на основеHTTPПротокол может записывать информацию о стабильном состоянии.

Классификация

Cookieвсегда сохраняется в клиенте (раннийJavaбудет частоCookieиSessionВ качестве сравнения технологий хранения,SessionЭто для сохранения данных на стороне сервера, большой объем хранилища данных увеличит нагрузку на сервер), в зависимости от места хранения в клиенте его можно разделить на памятьCookieи жесткий дискCookie.
ОЗУCookieОн поддерживается браузером, сохраняется в памяти и исчезает после закрытия браузера, а время его существования недолговечно. жесткий дискCookieСохраняется на жестком диске, есть время истечения срока действия, если пользователь не очистит его вручную или не будет достигнуто время истечения срока действия, жесткий дискCookieОн не будет удален, и время его существования является долгосрочным. Поэтому по времени существования его можно разделить на непостоянныйCookieи прочныйCookie.

Создать файлы cookie

Set-Cookieзаголовки ответов иCookieраздел заголовка запроса
использование сервераSet-CookieЗаголовки ответов отправляются пользовательскому агенту (обычно браузеру).CookieИнформация. ПростоCookieМожет быть, что-то вроде этого:Set-Cookie: <cookie名>=<cookie值>

Сервер говорит клиенту сохранитьCookieИнформация

В среде браузера получить не-HttpOnlyотмеченcookie


var cookies = document.cookie;


Недостатки файлов cookie

Cookieбудет добавлено к каждомуHTTPзапрос, поэтому трафик практически увеличивается. из-заHTTPв запросеCookieпередается в виде открытого текста, поэтому безопасность является проблемой, если вы не используетеHTTPS.

CookieРазмер ограничен4KBЛевый или правый, этого недостаточно для сложных потребностей хранения.

Простая инкапсуляция файлов cookie

настраиватьCookieОбычно путь и время истечения устанавливаются вместе.Обратите внимание, что время истечения необходимо преобразовать вGMTилиUTC

код

(function IIFE(root){
    function getCookie(cname, defaultValue){
        var value = new RegExp('(^|;| )'+cname+'=([^;]*?)(;|$)', 'g').exec(document.cookie);
        console.log('value:', value);
        if(!value) return defaultValue;
        return value[2];
    }
    function setCookie(cname, cvalue, day, path){
        day = day || 1;
        path = path || '/';
        var date = new Date();
        date.setTime(date.getTime() + day * 24 * 60 * 60 * 1000);
        document.cookie = cname+'='+cvalue+'; expires=' + date.toGMTString() + '; path='+path+'; ';
    }
    function deleteCookie(cname){
        setCookie(cname, null, -1);
    }
    root.Util = {
        getCookie: getCookie,
        setCookie: setCookie,
        deleteCookie: deleteCookie,
    }
})(window);

Результаты теста


Storage

в видеWeb Storage API Интерфейс,StorageПредоставляет доступ к хранилищу сеансов под определенным доменным именем (session storage) или локальное хранилище (local storage) функции, например, для добавления, изменения или удаления сохраненных элементов данных.

Если вы хотите манипулировать хранилищем сеансов домена (session storage),можно использоватьwindow.sessionStorageЕсли вы хотите манипулировать локальным хранилищем доменного имени (local storage),можно использоватьwindow.localStorage.

sessionStorageиlocalStorageИспользование такое же, разницаsessionStorageпроизойдет сбой при закрытии сеанса, то есть при закрытии браузера, иlocalStorageзаключается в хранении данных локально, и на него не влияет закрытие браузера, если только данные не очищены вручную

Вы можете обратиться к соответствующему API

developer.Mozilla.org/this-cn/docs/…

код

(function IIFE(){
    if(!window.localStorage){
        alert('your browser is not support localStorage!');
        return;
    }
    function getStorage(sname, defaultValue){
        //result = window.localStorage.sname
        //result = window.localStorage[sname]
        var result = window.localStorage.getItem(sname);
        return result || defaultValue;
    }
    function setStorage(sname, svalue){
        window.localStorage.setItem(sname, svalue);
    }
    function removeItem(sname){
        window.localStorage.removeItem(sname);
    }
    function getKey(keyIndex){
        return window.localStorage.key(keyIndex);
    }
    function getAllKeys(){
        var arr = [];
        for(var i=0;i<window.localStorage.length;i++){
            arr.push(window.localStorage.key(i));
        }
        return arr;
    }
    function clearStorage(){
        window.localStorage.clear();
    }
    function onStorageChange(event){
        console.log(event)
    }
    window.addEventListener('storage', onStorageChange);
    window.Util = {
        getStorage: getStorage,
        setStorage: setStorage,
        removeItem: removeItem,
        getKey: getKey,
        getAllKeys: getAllKeys,
        clearStorage: clearStorage,
    }
})();

Результаты теста


IndexedDB

С постоянным совершенствованием функций браузера все больше и больше веб-сайтов начали рассматривать возможность хранения большого объема данных на стороне клиента, что может уменьшить объем данных, получаемых с сервера, и получать данные непосредственно с локального сервера.

Существующие решения для хранения данных браузера не подходят для хранения больших объемов данных:Cookie размер не превышает4KB, и каждый запрос будет отправлен обратно на сервер;LocalStorage существует2.5MBприбыть10MB(разные браузеры) и не предоставляет функцию поиска, не может построить пользовательский индекс. Таким образом, необходимо новое решение, т.IndexedDBФон Рождества.

С точки зрения непрофессионала,IndexedDB Это локальная база данных, предоставляемая браузером, которая может создаваться и управляться с помощью веб-скриптов.IndexedDB Позволяет хранить большой объем данных, предоставляет интерфейс поиска, а также может строить индекс. все это LocalStorageне приходит с. Что касается типа базы данных,IndexedDB Не реляционная база данных (не поддерживаетсяSQL запрос), ближе кNoSQL база данных.

IndexedDBСвязанныйAPIМожет относиться к

король doc.com/JavaScript/…

код

(function IIFE(){
    if(!window.indexedDB){
        alert('your browser is not support indexedDB!');
        return;
    }
    var request = window.indexedDB.open('person', 1);
    var db;
    request.onerror = function (event) {
        console.log('数据库打开报错');
    };
    request.onsuccess = function (event) {
        db = request.result;
        console.log('数据库打开成功');
    };
    request.onupgradeneeded = function(event) {
        console.log('onupgradeneeded...');
        db = event.target.result;
        var objectStore = db.createObjectStore('person', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
    }
    function add(obj) {
        var request = db.transaction(['person'], 'readwrite')
            .objectStore('person')
            .add(obj)
            //.add({ id: 1, name: 'ccy', age: 18, email: 'test@example.com' });

        request.onsuccess = function (event) {
            console.log('数据写入成功');
        };
        request.onerror = function (event) {
            console.log('数据写入失败');
        }
    }
    function read(index) {
        var transaction = db.transaction(['person']);
        var objectStore = transaction.objectStore('person');
        var request = objectStore.get(index);
        request.onerror = function(event) {
            console.log('事务失败');
        };

        request.onsuccess = function(event) {
            if (request.result) {
                console.log('Name: ' + request.result.name);
                console.log('Age: ' + request.result.age);
                console.log('Email: ' + request.result.email);
            } else {
                console.log('未获得数据记录');
            }
        };
    }
    function readAll() {
        var objectStore = db.transaction('person').objectStore('person');
        objectStore.openCursor().onsuccess = function (event) {
            var cursor = event.target.result;
            if (cursor) {
                console.log('Id: ' + cursor.key);
                console.log('Name: ' + cursor.value.name);
                console.log('Age: ' + cursor.value.age);
                console.log('Email: ' + cursor.value.email);
                cursor.continue();
            } else {
                console.log('没有更多数据了！');
            }
        };
    }
    function update(obj) {
        var request = db.transaction(['person'], 'readwrite')
            .objectStore('person')
            .put(obj)
            //.put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });

        request.onsuccess = function (event) {
            console.log('数据更新成功');
        };

        request.onerror = function (event) {
            console.log('数据更新失败');
        }
    }
    function remove(index) {
        var request = db.transaction(['person'], 'readwrite')
            .objectStore('person')
            .delete(index);

        request.onsuccess = function (event) {
            console.log('数据删除成功');
        };
    }
    window.util = {
        add: add,
        read: read,
        readAll: readAll,
        update: update,
        remove: remove,
    }
})();

Результаты теста


постскриптум

Текущие популярные технологии хранения браузера в основном относятся к трем типам, описанным выше.webSqlиз-за диалектаSQLliteВ результате он не может быть унифицирован, а значит, это заброшенный стандарт.

localStorage,indexedDBЗдесь нет подробного введения, но для демонстрации дан простой пример кода, если вы не знакомы с ним, то можете обратиться к соответствующейAPI.

использованная литература

developer.Mozilla.org/this-cn/docs/…
developer.Mozilla.org/this-cn/docs/…
zh.wikipedia.org/wiki/Cookie
Уууу. Руан Ифэн.com/blog/2018/0…
король doc.com/JavaScript/…


Категории