• JavaScript的客户端存储


    一、前言:

      客户端存储实际上就是Web浏览器的记忆功能,通过浏览器的API实现数据存储到硬盘;

    二、存储的不同形式:

      1、Web存储:localStorage 和 sessionStorage 代表同一个Storage对象--持久化的索引为字符串,值也是字符串的数组;

            两者出来对存储的有效期和作用域不同,其他基本通用;且作用域都是文档源级别的,不能跨域存取;

            localStorage     : 存储的数据是永久性的,同源的文档间共享数据;可以读取或覆盖数据;但是受浏览器限制;

            sessionStorage :作用域限制在窗口或标签页,标签页关闭后会删除所有数据;

             两者都可以当做普通js对象使用,通过.key或[key]去设置和获取数据,新的浏览器还提供了正式的API:

            setItem():设置对应的名称和值,形如localStorage.setItem("x",1);

            getItem(): 传入名称获取对应的值,形如:localStorage.getItem("x");

            removeItem():传入名称,删除对应数据; clear():清空所有存储的数据;

            key() :与length联合使用 枚举所有名称:for(var i=0;i<storage.length;i++) {storage.key(i)};

      2、cookie: cookie数据会自动在Web浏览器和Web服务器之间传输,因此服务器脚本可以读写存储在客户端的cookie值;  

            cookie的限制:每个Web服务器保存的cookie不能超过20个,每个cookie保存的数据不能超过4kb;  

    //保存cookie:
    function setCookie(name,value){
        //对value值进行表面,转义分号,逗号和空白符;
        var cookie = name+""+encodeURIComponent(value);
        cookie += "; max-age="+3000;//设置有效期 毫秒数;
        cookie += ";path=/";        //设置作用域路径
        cookie += ";domain="+domain;//作用域域名 只能是当前服务器的域;
        cookie += "; secure"; //设置此属性,则只有通过HTTPS或其他安全协议连接是才能传递cookie;
        
        document.cookie = cookie; //保存
    }
    //改变与删除cookie都要使用相同的名字、路径和域; 改变时,值设为新的; 删除时,设置max-age=0;
    //读取所有cookie值
    function getCookie(){
        var cookies = {};
        var all = document.cookie;
        if(all === ""){
            return cookies;
        }
        var list = all.split("; ");
        for(var i in list){
            var cookie = list[i];
            var p = cookie.indexOf("=");
            cookies[cookie.substring(0,p)] = decodeURLComponent(cookie.substring(p+1));
        }
        return cookies;
    }     

       3、客户端数据库(html5):IndexedDB:一个对象数据库;Chrome和FireFox新版本支持;

         4、文件系统(HTML5): 可以操作本地文件系统进行读写文件和目录的操作; 目前只有Chrome新版本的浏览器实现了;

            

  • 相关阅读:
    拳击游戏(虚函数应用)
    虚函数的使用
    继承中的二义性归属问题
    继承的作用以及在子类中初始化所有数据的方法
    Exploring ES2016 Decorators
    Storage information for PWA application
    浏览器中常见网络协议介绍
    vuex所有核心概念完整解析State Getters Mutations Actions
    搭建一个webpack微服务器
    nodeJS接入微信公众平台开发
  • 原文地址:https://www.cnblogs.com/liangblog/p/6046764.html
Copyright © 2020-2023  润新知