JavaScript高级编程———数据存储(cookie、WebStorage)

Stella981
• 阅读 684

JavaScript高级编程———数据存储(cookie、WebStorage)

<script>
        /*Cookie 读写删
        CookieUtil.get()方法根据cookie的名称获取相应的值,它会在documen.cookie字符串中查找cookie名加上等于号的位置,
        如果找到了,那么使用indexof查找该位置之后的第一个分号(表示了该cookie的结束位置)
        如果没有找到分号,则表示该cookie是字符串中的最后一个,则余下的字符串都是cookie的值,
        该值使用decodeURIComponent()进行解码并最后返回,如果没有发现cookie,则返回null

        CookieUtil.set() 方法在页面上设置一个 cookie,接收如下几个参数:cookie的名称,cookie的值,
        可选的用于指定 cookie何时应被删除的 Date 对象,cookie的可选的 URL路径,可选的域,以及可选的
        表示是否要添加 secure 标志的布尔值。

        CookieUtil.unset() 方法可以处理这种事情。它接收 4 个参数:
        要删除的 cookie 的名称、可选的路径参数、可选的域参数和可选的安全参数
        */
        var CookieUtil = {
            get: function (name) {
                var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null;
                if (cookieStart > -1) {
                    var cookieEnd = document.cookie.indexOf(";", cookieStart);
                    if (cookieEnd == -1) {
                        cookieEnd = document.cookie.length;
                    }
                    cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
                }
                return cookieValue;
            },
            set: function (name, value, expires, path, domain, secure) {
                var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
                if (expires instanceof Date) {
                    cookieText += "; expires=" + expires.toGMTString();
                }
                if (path) {
                    cookieText += "; path=" + path;
                }
                if (domain) {
                    cookieText += "; domain=" + domain;
                }
                if (secure) {
                    cookieText += "; secure";
                }
                document.cookie = cookieText;
            },
            unset: function (name, path, domain, secure) {
                this.set(name, "", new Date(0), path, domain, secure);
            }
        };
        var subCookieUtil = {
            get: function (name, subName) {
                var subCookies = this.getAll(name);
                if (subCookies) {
                    return subCookies[subName];
                } else {
                    return null;
                }
            },
            getAll: function (name) {
                var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null;
                cookieEnd, subCookies, i, parts, result = {};
                if (cookieStart > -1) {
                    cookieEnd = document.cookie.indexOf(";", cookieStart);
                    if (cookieEnd == -1) {
                        cookieEnd = document.cookie.length;
                    }
                    cookieValue = document.cookie.substring(cookieStart +
                  cookieName.length, cookieEnd);
                    if (cookieValue.length > 0) {
                        subCookies = cookieValue.split("&");
                        for (i = 0, len = subCookies.length; i < len; i++) {
                            parts = subCookies[i].split("=");
                            result[decodeURIComponent(parts[0])] =
                            decodeURIComponent(parts[1]);
                        }
                        return result;
                    }
                }
                return null;
            },
            set: function (name, subName, value, expires, path, domain, secure) {
                var subcookies = this.getAll(name) || {};
                subcookies[subName] = value;
                this.setAll(name, subcookies, expires, path, domain, secure);
            },
            setAll: function (name, subcookies, expires, path, domain, secure) {
                var cookieText = encodeURIComponent(name) + "=",
                subcookieParts = new Array(),
                subName;
                for (subName in subcookies) {
                    if (subName.length > 0 && subcookies.hasOwnProperty(subName)) {
                        subcookieParts.push(encodeURIComponent(subName) + "=" +
                        encodeURIComponent(subcookies[subName]));
                    }
                }
                if (cookieParts.length > 0) {
                    cookieText += subcookieParts.join("&");
                    if (expires instanceof Date) {
                        cookieText += "; expires=" + expires.toGMTString();
                    }
                    if (path) {
                        cookieText += "; path=" + path;
                    }
                    if (domain) {
                        cookieText += "; domain=" + domain;
                    }
                    if (secure) {
                        cookieText += "; secure";
                    }
                } else {
                    cookieText += "; expires=" + (new Date(0)).toGMTString();
                }
                document.cookie = cookieText;
            },
            unset: function (name, subName, path, domain, secure) {
                var subcookies = this.getAll(name);
                if (subcookies) {
                    delete subcookies[subName];
                    this.setAll(name, subcookies, null, path, domain, secure);
                }
            },
            unsetAll: function (name, path, domain, secure) {
                this.setAll(name, null, new Date(0), path, domain, secure);
            }
        };
        //设置cookie
        CookieUtil.set("name", "Nicholas");
        CookieUtil.set("book", "Professional JavaScript");

        //读取cookie的值
        var cookieName = CookieUtil.get("name");
        var cookieBook = CookieUtil.get("book");

        console.log(cookieName);
        console.log(cookieBook);

        //删除cookie
        CookieUtil.unset("name");
        CookieUtil.unset("book");

        //设置 cookie,包括它的路径、域、失效日期
        CookieUtil.set("name", "Nicholas", "/GJBC/21/Demo", "www.wrox.com", new Date("January 1, 2020"));
        //删除刚刚设置的 cookie
        CookieUtil.unset("name", "/GJBC/21/Demo", "www.wrox.com");
        //设置安全的 cookie
        CookieUtil.set("name", "Nicholas", null, null, null, true);

        //假设 document.cookie=data=name=Nicholas&book=Professional%20JavaScript
        //取得全部子 cookie
        //var data = SubCookieUtil.getAll("data");
        //alert(data.name); //"Nicholas"
        //alert(data.book); //"Professional JavaScript"
        ////逐个获取子 cookie
        //alert(SubCookieUtil.get("data", "name")); //"Nicholas"
        //alert(SubCookieUtil.get("data", "book")); //"Professional JavaScript"


        ////假设 document.cookie=data=name=Nicholas&book=Professional%20JavaScript
        ////设置两个 cookie
        //SubCookieUtil.set("data", "name", "Nicholas");
        //SubCookieUtil.set("data", "book", "Professional JavaScript");
        ////设置全部子 cookie 和失效日期
        //SubCookieUtil.setAll("data", { name: "Nicholas", book: "Professional JavaScript" },
        //new Date("January 1, 2010"));
        ////修改名字的值,并修改 cookie 的失效日期
        //SubCookieUtil.set("data", "name", "Michael", new Date("February 1, 2010"));

        ////仅删除名为 name 的子 cookie
        //SubCookieUtil.unset("data", "name");
        ////删除整个 cookie
        //SubCookieUtil.unsetAll("data");



        /*Web存储机制  WebStorage最早在Web超文本应用技术工作组的Web应用1.0规范中描述的,WebStorage的目的是克服cookie带来的一些限制,
        当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器,WebStorage的两个主要目标是
        1、提供一种在cookie之外存储会话数据的途径
        2、提供一种存储大量可以跨会话存在的数据的机制

        Storage类型提供最大的存储空间(因浏览器而异)来存储名值对,Storage的实例与其他对象类似,
        Storage 类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串
        Storage有以下方法
            clear() : 删除所有值;Firefox 中没有实现 。
            getItem(name) :根据指定的名字 name 获取对应的值。
          key(index) :获得 index 位置处的值的名字。
          removeItem(name) :删除由 name 指定的名值对儿。
          setItem(name, value) :为指定的 name 设置一个对应的值

        sessionStorage 对象
        sessionStorage 对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭。这个对象
        就像会话 cookie,也会在浏览器关闭后消失。存储在 sessionStorage 中的数据可以跨越页面刷新而
        存在,同时如果浏览器支持,浏览器崩溃并重启之后依然可用(Firefox 和 WebKit 都支持,IE 则不行)。
        */

        //使用方法存储数据
        sessionStorage.setItem("name", "Nicholas");
        //使用属性存储数据
        sessionStorage.book = "Professional JavaScript";

        //使用方法读取数据
        var SessionStorageName = sessionStorage.getItem("name");
        alert(SessionStorageName);
        //使用属性读取数据
        var bookStorage = sessionStorage.book;
        alert(bookStorage);

        /*还可以通过结果length属性和key()方法来迭代sessionStorage中的值
          它是这样遍历sessionStorage中的键值对,首先通过key()方法获取指定位置上的名字,然后再通过getItem()找出对应改名字的值
          还可以使用for-in循环来迭代SessionStorage中的值
          
        */
        for (var i = 0, len = sessionStorage.length; i < len; i++) {
            var key = sessionStorage.key(i);
            var value = sessionStorage.getItem(key);
            console.log(key + "=" + value);
            alert(key + "=" + value);
        }

        //for (var key in sessionStorage) {
        //    var value = sessionStorage.getItem(key);
        //    alert(key + "=" + value);
        //}

        //sessionStorage使用removeItem方法删除一个值
        sessionStorage.removeItem("book");

        /*globalStorage对象,首先要指定那些域可以访问该数据,可以通过方括号标记使用属性来实现*/

        /*在这里,访问的是针对域名 wrox.com 的存储空间 */
        //保存数据
        globalStorage["wrox.com"].name = "Nicholas";
        //获取数据
        var name = globalStorage["wrox.com"].name;

        //这里所指定的存储空间只能由来自 www.wrox.com 的页面访问,其他子域名都不行。
        //保存数据
        globalStorage["www.wrox.com"].name = "Nicholas";
        //获取数据
        var name = globalStorage["www.wrox.com"].name;

        //存储数据,任何人都可以访问——不要这样做!
        globalStorage[""].name = "Nicholas";
        //存储数据,可以让任何以.net 结尾的域名访问——不要这样做!
        globalStorage["net"].name = "Nicholas";


        //globalStorage 的每个属性都是 Storage 的实例。因此,可以像如下代码中这样使用。
        globalStorage["www.wrox.com"].name = "Nicholas";
        globalStorage["www.wrox.com"].book = "Professional JavaScript";
        globalStorage["www.wrox.com"].removeItem("name");
        var book = globalStorage["www.wrox.com"].getItem("book");

        //如果你事先不能确定域名,那么使用 location.host 作为属性名比较安全
        globalStorage[location.host].name = "Nicholas";
        var book = globalStorage[location.host].getItem("book");
        /*如果不使用 removeItem() 或者 delete 删除,或者用户未清除浏览器缓存,存储在globalStorage 属性中的数据会一直保留在磁盘上。
        这让 globalStorage 非常适合在客户端存储文档或者长期保存用户偏好设置*/

        /*localStorage对象必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上,这相当于globalStorage*/

        //使用方法存储数据
        localStorage.setItem("name", "Nicholas");
        //使用属性存储数据
        localStorage.book = "Professional JavaScript";
        //使用方法读取数据
        var name = localStorage.getItem("name");
        //使用属性读取数据
        var book = localStorage.book;

        //为了兼容只支持 globalStorage 的浏览器,可以使用以下函数。
        function getLocalStorage(){
            if (typeof localStorage == "object"){
                return localStorage;
            } else if (typeof globalStorage == "object"){
                return globalStorage[location.host];
            } else {
                throw new Error("Local storage not available.");
            }
        }

        var storage = getLocalStorage();
    </script>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Easter79 Easter79
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这