专栏首页ccylovehs前端存储技术

前端存储技术

前言

后端常用数据库做数据存储,譬如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大家可以参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

代码

(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可参考 https://wangdoc.com/javascript/bom/indexeddb.html#indexeddb-%E5%AF%B9%E8%B1%A1

代码

(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。

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Storage https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies https://zh.wikipedia.org/wiki/Cookie http://www.ruanyifeng.com/blog/2018/07/indexeddb.html https://wangdoc.com/javascript/bom/indexeddb.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • hive核心基本概念

    基于 Hadoop 的一个数据仓库工具: hive本身不提供数据存储功能,使用HDFS做数据存储, hive也不分布式计算框架,hive的核心工作就是把...

    业余草
  • Spring Boot 2.x(四):与Mybatis不得不说的几种姿(zhi)势(shi)

    目前的大环境下,使用Mybatis作为持久层框架还是占了绝大多数的,下面我们来说一下使用Mybatis的几种姿势。

    Vi的技术博客
  • Android开发笔记(八十五)手机数据库Realm

    Android自带的SQLite数据库,在多数场合能够满足我们的需求,但随着app广泛使用,SQLite也暴露了几个不足之处: 1、开发者编码比较麻烦,而...

    用户4464237
  • 使用python对数据库,云平台,oracle,aws,es导入导出实战

    本系列文章主要针对ETL大数据处理这一典型场景,基于python语言使用Oracle、aws、Elastic search 、Spark 相关组件进行一些基本的...

    用户1539362
  • Android开发笔记(八十六)几个特殊的类

    interface是一些功能的集合,但它只定义了对象必须实现的成员,而不包含成员的实现代码,成员的具体代码由实现接口的类提供。Android对接口的使用场景...

    用户4464237
  • 如何保证MongoDB的安全性?

    MongoDB确实躺枪了,因为这事的责任当然不在数据库,而在于使用数据库的人没有做必要的安全配置。

    Fundebug
  • MySQL批量更新死锁案例分析

    问题描述 在做项目的过程中,由于写SQL太过随意,一不小心就抛了一个死锁异常,如下:

    业余草
  • Oracle跨服务器访问使用dblink

    当要夸服务器访问数据库时,我们可以使用dblink建立连接服务器间的通道,本地创建了远程数据库的dblink后,访问远程服务器的库就像操作一个库一样了。

    动力节点Java学院
  • 业余草谈SessionFactory中的Session和HttpSession的区别

    有一天,一个以为自己javaEE很叼的程序员,在经历了好久不写java代码的情况下,去参加阿里巴巴的java面试,然后,在被问到一个很简单的问题的时候,结果没有...

    业余草
  • Spring Boot 2.x(三):整合jpa

    JPA虽然小众,但是足够优雅╮(╯_╰)╭,由于微服务的兴起,服务粒度的细化,多表联合的场景逐渐减少,更多的是一些简单的单表查询,而这正是JPA的强项所在。所以...

    Vi的技术博客

扫码关注云+社区

领取腾讯云代金券