摸着石头过河_崖边树
摸着石头过河_崖边树

Web前端基础篇-HTML5-05-最全本地存储总结

本地存储对于一个前端来说是一项必不可少的技能，虽然你一直在使用，但是你不一定全部了解，那么现在又开始老夫的装B时刻-show time


tmpdir__17_9_7_15_04_07.jpg

温馨提示：文章结构如下，阅读完可能需要花费5分钟

一、 cookie : 为了浏览器兼容性 H5之前很长一段时间用， 但是现在不怎么用啦
二、 storage: (包含 localstorage/ sessionstorage)本地存储
三、WebSQL: 网页版的数据库 - 很少使用，但是还是讲讲
四、 indexDB: 本地缓存数据库 - 可以替代WebSQL

进入正文

一、 cookie

  1. cookie的优点：

    A.基本所有浏览器都适用
    B.同源http 中携带 -只要有请求涉及cookie，cookie就要在服务器和浏览器之间来回传送

  2. cookie的缺点

A.cookie空间大小：4K，不适合存业务数据
B .cookie安全性问题：由于在HTTP请求中的cookie是明文传递的（HTTPS不是），带来的安全性问题还是很大的
C.网络负担：我们知道cookie会被附加在每个HTTP请求中，请求和返回都会有，浪费流量

  1. cookie 常用的API

    // 设置cookie
    function setCookie(c_name, value, expireDay, path, domain, secure = true) {
    let cookieName = encodeURIComponent(c_name) + '=' + encodeURIComponent(value);
    if (expireDay) {
    const exdate=new Date()
    exdate.setDate(exdate.getDate() + expiredays);
    cookieName += ';expires=' + exdate.toUTCString()
    }
    if (path) {
    cookieName += ';path' + path
    }
    if (domain) {
    cookieName += ';domain=' + domain
    }
    if (secure) {
    cookieName += ';secure=' + secure
    }
    document.cookie = cookieName;
    }
    /**

    • 获取cookie
      /
      function getCookie(c_name){
      if(document.cookie.length > 0){
      const cookieName = encodeURIComponent(c_name) + '=';
      const startIndex = document.cookie.indexof(cookiename);
      let cookieValue = ''
      if(startIndex !== -1){
      let endIndex = document.cookie.indexof(';', startIndex);
      if(endIndex === -1) {
      endIndex = document.cookie.length;
      }
      //获取对应cookieName的value值
      cookieValue = document.cookie.substring(startIndex + cookieName.length, endIndex)
      }
      }
      }
      /
    • 移除cookie
      */
      function deleteCookie(c_name, value) {
      if(document.cookie.length > 0){
      const cookieName = encodeURIComponent(c_name) + '=' + encodeURIComponent(value);
      const exp = new Date(0);
      document.cookie = cookieName + ';expires=' + exp.toUTCString();
      }
      }

  2. 参数说明
    name： 名称
    value： 值
    path：路径
    expires：过期时间，如果不设置过期时间，关闭浏览器消失，如果设置过期时间存到硬盘中，默认存在内存中
    secure： 安全
    domain：web 共享cookie

  3. 适用场景

cookie 空间小，但是可以利用http来回传输的优点可以保存用户id 或者token验证信息，但是要注意加密

注意：一般情况我们很少去封装cookie, 因为有插件js-cookies
二. storage - 本地存储我们最常用

1.分类:
A-localStorage: 本地永久性存储数据，除非手动将其删除或清空
B-sessionStorage：存储的数据只在会话期间有效（会话存储、临时存存储），关闭浏览器则自动删除

2.存储方式 : key- value 键值对方式

3.存储大小 : 每个域名5M

4.存储内容：数组，图片，json，样式等（只要是能序列化成字符串的内容都可以存储）都需要序列化为字符串类型

5.浏览器兼容情况： IE8.0+ Chrome 4.0+ FireFox 3.0+ 等

6.常用的API：

  • length:唯一的属性，只读，用来获取storage内的键值对数量；
  • key：根据index获取storage的键名
  • getItem：根据key获取storage内的对应value
  • setItem：为storage内添加键值对
  • removeItem：根据键名，删除键值对
  • clear：清空storage对象

7.事件StorageEvent -监听storage 变化

Web前端基础篇-HTML5-05-最全本地存储总结_第1张图片
image.png
  1. 使用场景

保存少量业务数据，比如用户信息，但是需要加密

  1. 怎么设计一个storage 工具类
    A.、因为空间有限，应可配置数据失效时间
    B、 需要处理内存溢出
    C、最好有加密
    下面是老夫参考别人设计的一个简单类（暂时没有考虑加密,不想看的可以直接略过）
 /**
* 本地保存localstorage
*/
import ZBConsole from "../common/ZBConsole.js";
const LocalStorageHelper = {
/**
 * 保存数据
 * @param key  保存的key
 * @param value   保存的值
 * @param expires  过期时间
 */
setValue(key, value, expires){
   const _d = new Date();
   // 存入日期
    const inTime =_d.getTime();

    if(!expires){
        _d.setTime(inTime + this.defaultExpeierTime);
        expires = _d.getTime();
    }
    if(!this.__isSupportValueType(value)){
        return false;
    }


    // 保存所有的key 数组
    this.__setKeyCache(key, expires);

    // 需要保存的对象
    const entity = this.__createStorageObj(value,inTime,expires);
    const entityStr = JSON.stringify(entity);

    // 保存对象
    try{
        this.storeProxy.setItem(key, entityStr);
        return true;
    }catch (e) {
        // localstorage内存溢出
        if(e.name === 'QuotaExceededError'){
            // 溢出过期时间最长的数据
            if(!this.__removeLastCache()){
                this.__asset('溢出移除数据失败');
            }
            // 重新保存
            this.setValue(key,value,expires);

        }
    }
    return false;

},
/**
 * 获取数据
 */
getValue(key){
    const nowTime = new Date().getTime();
    let resultObject = null;
    try {
        const resultObjectStr = this.storeProxy.getItem(key);
        if(!resultObjectStr || resultObjectStr.length == 0){
            return null;
        }
        resultObject = JSON.parse(resultObjectStr);
        //数据过期
        if (resultObject.expires < nowTime){
            return null;
        }
        // 数据正常
        const valueStr = resultObject.value;
        if(valueStr === this.dataTypes.type_Array
            || valueStr === this.dataTypes.type_Object){
            const dataList = JSON.stringify(valueStr);
            return dataList;
        }else {
            return valueStr;
        }

    }catch (e) {
        console.log('获取数据失败--',e);
    }
},


/**
 * 溢出过期时间最近的的数据
 */
__removeLastCache(){

    // 移除次数
    const num = this.removeNum || 5;
    //取出键值对
    const cacheStr = this.storeProxy.getItem(this.keyCache);

    // 说明没有数据需要移除
   if (!cacheStr || cacheStr.length === 0){
       return false;
   }

   const cacheKeyMap = JSON.parse(cacheStr);
   if(!_.isArray(cacheKeyMap)){
       return false;
   }

   // 时间排序
    cacheKeyMap.sort(function (a,b) {
        return a.expires - b.expires;
    });

    // 删除数据
    const delKeyMap = cacheKeyMap.splice(0, num);

    for (let i = 0; i < delKeyMap.length; i++) {
         const item = delKeyMap[I];
         this.storeProxy.removeItem(item.key);
    }

    // 保存key
    this.storeProxy.setItem(this.keyCache, JSON.stringify(cacheKeyMap));

    return true;
},


/**
 * 移除过期的数据
 */
removeExpiresCache(){
    //1. 取出当前的所有key
    const cacheKeyStr = this.storeProxy.getItem(this.keyCache);
    if(!cacheKeyStr || cacheKeyStr.length === 0){
        return false;
    }
    const cacheKeyMap = JSON.parse(cacheKeyStr);
    if(!_.isArray(cacheKeyMap)){
        return false;
    }

    // 2.获取当前时间
    const nowTime = new Date().getTime();

    // 3.比较过期时间
    const newKeyMap = [];
    for (let i = 0; i < cacheKeyMap.length; i++) {
        const item = cacheKeyMap[I];
        if(item.expires < nowTime){
            // 已经过期
            this.storeProxy.removeItem(item.key);
        }else {
            // 没有过期
            newKeyMap.push(item);
        }
    }

    const jsonStr = JSON.stringify(newKeyMap);
    this.storeProxy.setItem(this.keyCache, jsonStr);

    return true;

},

/**
 * 保存key到内存中
 */
__setKeyCache(key, expires){
    if (!key || !expires || expires < new Date().getTime()){
        return false;
    }
   const  saveStr = this.storeProxy.getItem(this.keyCache);

   const obj = {};
   obj.key = key;
   obj.expires = expires;

     // 1.之前保存的数据为null
    let saveList = [];
    if(!saveStr || saveStr.length == 0){
       saveList.push(obj);
       return true;
    }

    // 2. 之前的保存的数据有值但是不是数组
    saveList = JSON.parse(saveStr);
    if(!_.isArray(saveList)){
        saveList = [];
        saveList.push(obj);
        return true;
    }

    // 3. 判断key值是否是之前保存的
    let findKey = false;
    for (let i = 0; i < saveList.length; i++) {
        let item = saveList[I];
        if(item.key === key){
            item = obj;
            findKey = true;
            break;
        }
    }
    if(!findKey){
        saveList.push(obj);
    }

    // 4. 保存所有的key
    const jsonStr =  JSON.stringify(saveList);
    this.storeProxy.setItem(this.keyCache, jsonStr);
},

/**
 * 创建保存的object
 */
__createStorageObj(vaule, inTime, expires){
    if(!vaule){
        this.__asset('保存值不能为null');
        return;
    }
    let saveValue = vaule;
    if(vaule instanceof Object){
        saveValue = JSON.stringify(vaule);
    }
    const obj = {
        value: saveValue,
        inTime: inTime,
        expires: expires,
        type: Object.prototype.toString.call(vaule),
    }
    return obj;
},

/**
 * 是否支持这个类型是值
 */
__isSupportValueType(value){
   if(!value){
       this.__asset('保存的value不能为null');
       return false;
   }
   const objectStr = Object.prototype.toString.call(value);
   if(objectStr === "[object Symbol]"){
       this.__asset('保存的value不支持Symbol类型');
       return false;
   }

   return true;
},

/**
 * 初始化
 */
__initialize(){
    this.__propertys();
},
/**
 * 设置默认属性
 */
__propertys(){
    //代理对象，默认为localstorage
    this.storeProxy = window.localStorage;
    if(!this.storeProxy){
        this.__asset('浏览器不支持localstorage');
        return false;
    }

    //60 * 60 * 24 * 30 * 1000 ms ==30天 过期时间
    this.defaultExpeierTime = 2592000000;

    //本地缓存用以存放所有localstorage键值与过期日期的映射
    this.keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';

    //当缓存容量已满，每次删除的缓存数
    this.removeNum = 5;

    // 数据类型
    this.dataTypes = {
        type_Array: "[object Array]",
        type_Object: "[object Object]",
        type_Boolean: "[object Boolean]",
        type_String: "[object String]",
        type_Number: "[object Number]",
        type_Symbol : "[object Symbol]",
    }

},

/**
 * 断言
 */
__asset(message){
    ZBConsole.logTrace(message);
    throw message;
 }
};
;(function(window){
// 暴露类
function ZBStorage() {
    LocalStorageHelper.__initialize();
    // 暴露方法
    ZBStorage.prototype.setValue = function(key, value, expires){
        LocalStorageHelper.setValue(key, value, expires)
   }

    ZBStorage.prototype.getValue = function (key) {
       return LocalStorageHelper.getValue(key)
   }

}
  window.ZBStorage = new ZBStorage();
})(window);
 export default  LocalStorageHelper;

结果：


Web前端基础篇-HTML5-05-最全本地存储总结_第2张图片
三. WebSQL - 可以在最新版的 Safari, Chrome 和 Opera 浏览器中使用，但是很少用

相对有过数据库经验的人很简单，基本就是执行SQL语句

  1. 支持情况
    Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作

  2. 核心API
    openDatabase：新建的数据库创建一个数据库对象或者打开已有的数据库
    transaction： 执行SQL语句的事务
    executeSql： 执行SQL语句

3.存储大小： 自定义设置大小

  1. 使用场景：对数据库设计比较了解的人，存储大量数据

  2. 怎么设计存储工具类

 /**
 * web sql Web SQL 数据库可以在最新版的 Safari, Chrome 和   Opera 浏览器中工作
 */
export default {
/**
 * 打开数据库
 */
openSQLite(){
    if(!this.sqlDB){
        //  数据库名称、版本号、描述文本、数据库大小、创建回调
        this.sqlDB = openDatabase('zbsqlite','1.0.0','数据库', 2*1024*1024, function () {

        });
    }
},
/**
 * 执行sql 语句
 */
executeSql(sql){
    this.openSQLite();
    if(!sql || sql.length == 0){
        return;
    }
    this.sqlDB.transaction(function (tx) {
        tx.executeSql(sql);
    });
},
/**
 * 创建表
 */
createTable(tableName){
   const sql = `CREATE TABLE IF NOT EXISTS ${tableName} (id unique, name, age)`;
   this.executeSql(sql);
},
/**
 * 插入数据
 */
insetTable(){
    const sql_data01 = 'INSERT INTO zbtestTable (id, name, age) VALUES (1, "甄姬", 15)';
    const sql_data02 ='INSERT INTO zbtestTable (id, name, age) VALUES (2, "安其拉", 20)';
    this.executeSql(sql_data01);
    this.executeSql(sql_data02);
},
/**
 * 查询数据
 */
queryTable(){
    const sql = "SELECT * FROM zbtestTable";
    this.executeSql(sql);
}
}

结果：

Web前端基础篇-HTML5-05-最全本地存储总结_第3张图片
image.png
四. indexDB - 索引数据库(可以用保存数据/离线缓存)
  1. 特点：

A. 异步API-请求-响应的模式保存与获取数据，不是我们熟悉的key-value，但是存储方式键值对储存;
B.索引数据库没有表的概念，但是有objectStore， 就是类似于数据库的表
C.一个数据库中可以包含多个objectStore
D. 不属于关系型数据库（不支持 SQL 查询语句）
E. 储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限
F.同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库

2.对象的基本概念

数据库：IDBDatabase 对象
对象仓库：IDBObjectStore 对象
索引： IDBIndex 对象
事务： IDBTransaction 对象
操作请求：IDBRequest 对象
指针： IDBCursor 对象
主键集合：IDBKeyRange 对象

  1. 操作流程

3.1 创建或者打开数据库

/**
 * indexDB对象
 */
indexDBOptions:{
    name: "test-01",
    version: 1,
    db:null,
},
   /**
 * 打开数据库
 */
openIndexDB(storeName, callBack){
    if(!this.indexDBOptions.db){
        // open(name: string, version?: number)  name 数据库的名字 version: 版本
        const dbRequest = window.indexedDB.open(this.indexDBOptions.name, this.indexDBOptions.version);
        const that = this;

        // success事件表示成功打开数据库。
        dbRequest.onsuccess = function (event) {
            const db = event.target.result;
            that.indexDBOptions.db = db;
            if(callBack){
                callBack();
            }
        };
        //  error事件表示打开数据库失败
        dbRequest.onerror = function (event) {
            console.log("数据库打开失败--------" || e.currentTarget.error.message);
        };

        // 如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded
        dbRequest.onupgradeneeded=function(e){
            const db = e.target.result;
            console.log('DB version changed to '+ db.version);
            if(!db.objectStoreNames.contains(storeName)){
                // 创建store 新建对象仓库（即新建表） 主键是id
                const store = db.createObjectStore(storeName, {keyPath:"id"});

                // 创建索引 IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）
                store.createIndex('nameIndex', 'name', {unique: true});
                store.createIndex('ageIndex', 'age', {unique: true});

            }

        };
    }
},

3.2 写入数据

  /**
 * 获取数据表 objectStore
 */
getStore(storeName, callBack){
    
    if(this.indexDBOptions.db){
        // "readonly" | "readwrite" | "versionchange" 三种方式
        const transation = this.indexDBOptions.db.transaction(storeName, "readwrite");
        const store = transation.objectStore(storeName);
        if(callBack){
            callBack(store);
        }
    }else {
        const that = this;
        this.openIndexDB(storeName, function () {
            that.getStore(storeName, callBack);
        });
    }
},

 /**
 * 保存数据
 */
addDataToDB(storeName, dataList){
    const that = this;
    // 1. 创建表
    this.openIndexDB(storeName ,function () {
        // 2. 获取表
       that.getStore(storeName, function (store) {
            // 3.保存数据
            for (let i = 0; i < dataList.length; i++) {
                const item = dataList[I];
                store.add(item);
            }
        });
    });
},
  const persons = [
{
    id: 1000,
    name: "亚瑟",
    age: 15,
},
{
    id: 1001,
    name: "安其拉",
    age: 20,
},
{
    id: 1002,
    name: "典韦",
    age: 18,
 }
];
//  IndexDBHepler 工具类
IndexDBHepler.openIndexDB('person-test');
IndexDBHepler.addDataToDB('person-test',persons);

结果：

Web前端基础篇-HTML5-05-最全本地存储总结_第4张图片
image.png

3.3 获取数据 - 三种方式

  • 通过key获取数据

  • 通过索引获取数据

  • 通过游标获取

    /**
* 获取数据 通过key
*/
getDataByKeyFromDB(storeName, key, callBack){
  // 1. 获取表
  this.getStore(storeName, function (store) {
     const request=  store.get(key)

     request.onsuccess = function (e) {
         const person=e.target.result;
         if(callBack){
             callBack(person);
         }
         console.log("通过key获取数据----",person);
     }
  });
 },
  /**
   * 通过索引获取数据
   */
  getDataByIndexFromDB(storeName, indexName, value, callBack){
  this.getStore(storeName, function (store) {
      const index = store.index(indexName);
      const request = index.get(value);
      request.onsuccess = function (e) {
          const person=e.target.result;
          if(callBack){
              callBack(person);
          }
          console.log("通过Index获取数据----",person);
      }
  });
 },
  /**
   * 通过游标获取
   */
  getDataByCursorFromDB(storeName, callBack){
     this.getStore(storeName, function (store) {
      const request = store.openCursor();
      request.onsuccess = function (e) {
          const cursor=e.target.result;
          if(cursor){
              const person=cursor.value;
              console.log('通过游标获取---',person);
              cursor.continue();
          }
      }
  });
 },

3.4关闭和删除数据库

 /**
 * 关闭数据库
 */
closeIndexDB(){
    if(this.indexDBOptions.db){
        this.indexDBOptions.db.close();
    }
},
/**
 * 删除数据库
 */
deleteIndexDB(name){
    const indexName = this.indexDBOptions.name || name;
    this.closeIndexDB();
    window.indexedDB.deleteDatabase(indexName);
}
  1. 使用场景

存储大量数据，比如页面离线缓存等

最后，以上总结都是老夫为了方便理解自己总结的内容，其中参考以下资料，创作不易，尊重原著

参考文献链接
http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

H5系列
Web前端基础篇-HTML-01-BOM浏览器对象模型
Web前端基础篇-HTML-02-HTML的生命周期
Web前端基础篇-HTML-03-事件处理系统
Web前端基础篇-HTML-04-HTML 渲染流程
Web前端基础篇-HTML5-05-最全本地存储总结
Web前端基础篇-HTML5-06-离线缓存AppCache
Web前端基础篇-HTML5-07-浏览器缓存机制

你可能感兴趣的:(Web前端基础篇-HTML5-05-最全本地存储总结)

  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • 水平垂直居中的几种方法（总结） LJ小番茄 CSS_玄学语言htmljavascript前端csscss3
    1.使用flexbox的justify-content和align-items.parent{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*需要指定高度*/}2.使用grid的place-items:center.parent{display:grid;place-item
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • 关于提高复杂业务逻辑代码可读性的思考 编程经验分享 开发经验java数据库开发语言
    目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一
  • 拥有断舍离的心态，过精简生活--《断舍离》读书笔记 爱吃丸子的小樱桃
    不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 每日算法&面试题，大厂特训二十八天——第二十天（树） 肥学 ⚡算法题⚡面试题每日精进java算法数据结构
    目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
  • 阶段总结反思 轻争
    马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
  • 【华为OD技术面试真题 - 技术面】- python八股文真题题库（4) 算法大师 华为od面试python
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法
  • Python爬虫解析工具之xpath使用详解 eqa11 python爬虫开发语言
    文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门
  • 主题升华随机抽总结 木棉咕噜
    昨天晚上在火山灿教练那里抽了主题升华最后一关。一共抽了两个故事，现总结如下。第一个故事是《并不是你想象的那样》。主题一：有时候，面对别人一些貌似不合常情的行为，不要轻易的指责他，也许背后有我们所不知道的原因。在这一个主题里面，刚开始的时候，我没有加上貌似二字。所以就没有改动之后这么精准。主题二：有时候我们对他人善意的行为，可能会给我们带来一些意外的回报。主题三：面对同样一件事，因为不同的人看待问题
  • 【无标题】达瓦达瓦 JhonKI 考研
    博客主页：https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正！本文由JohnKi原创，首发于CSDN未来很长，值得我们全力奔赴更美好的生活✨文章目录前言111️‍111❤️111111111111111总结111前言111骗骗流量券，嘿嘿111111111111111111111111111️‍111❤️111111111111111总结11
  • 上图为是否色发 JhonKI 考研
    博客主页：https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正！本文由JohnKi原创，首发于CSDN未来很长，值得我们全力奔赴更美好的生活✨文章目录前言111️‍111❤️111111111111111总结111前言111骗骗流量券，嘿嘿111111111111111111111111111️‍111❤️111111111111111总结11
  • 143234234123432 JhonKI 考研
    博客主页：https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正！本文由JohnKi原创，首发于CSDN未来很长，值得我们全力奔赴更美好的生活✨文章目录前言111️‍111❤️111111111111111总结111前言111骗骗流量券，嘿嘿111111111111111111111111111️‍111❤️111111111111111总结11
  • 1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven Energet!c 开发语言
    1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach
  • CentOS的根目录下，/bin 和 /sbin 用途和权限 Energet!c Linux日常centoslinux运维
    CentOS的根目录下，/bin和/sbin用途和权限一、/bin(Binary)二、/sbin(SystemBinary)三、总结在CentOS的根目录下，/bin和/sbin目录有不同的用途和权限一、/bin(Binary)用途:存放系统的基本命令，这些命令对所有用户都是可用的。例如：ls、cp、mv、rm等。权限:普通用户和系统管理员都可以使用这些命令。二、/sbin(SystemBinar
  • linux 发展史 种树的猴子 内核java操作系统linux大数据
    linux发展史说明此前对linux认识模糊一知半解，近期通过学习将自己对于linux的发展总结一下方便大家日后的学习。那Linux是目前一款非常火热的开源操作系统，可是linux是什么时候出现的，又是因为什么样的原因被开发出来的呢。以下将对linux的发展历程进行详细的讲解。目录一、Linux发展背景二、UINIX的诞生三、UNIX的重要分支-BSD的诞生四、Minix的诞生五、GNU与Free
  • 又到年末 伊人微语
    今天，工作群里，各个部门开始提醒老师们上交各种期末总结资料，才蓦然感觉这个学期已接近尾声，才意识到2022即将过去，新的一年的脚步声已经越来越近不由得生阳一些感慨。年纪大了，感觉到每个日子都是“倏”地一声就过去了，来不及思量，来不及回顾，一年就这么过去了。我常常想，为什么会有这样的感觉呢？年轻时候的每一天是24小时，现在的每一天也不曾少过一分钟，为什么就会感觉到它的脚步越来越快呢？后来我想明白了，
  • 大都会资本BMAN的2018年终总结 非线性思考
    1投资的本质是认知变现赚钱=足够的认知*高效的的变现。2投资的三大基石策略:提升认知高效变现知行合一3如果你亏钱了要么是认知的问题，要么是变现的问题，要么而是知行合一的问题。4投资需要知行合一，很简单的道理，却拦住了很多高手，是因为认知和行动中间还隔着人性。顶级的高手能把自己从贪嗔痴中抽离出来，顶级高手没有人性，只有原则。5如果你玩的是空气币，就不要幻想拿着它改变世界，那是你套出了幻觉，眼光放短一
  • 2024.9.6 Python，华为笔试题总结，字符串格式化，字符串操作，广度优先搜索解决公司组织绩效互评问题，无向图 RaidenQ python华为leetcode算法力扣广度优先无向图
    1.字符串格式化name="Alice"age=30formatted_string="Name:{},Age:{}".format(name,age)print(formatted_string)或者name="Alice"age=30formatted_string=f"Name:{name},Age:{age}"print(formatted_string)2.网络健康检查第一行有两个整数m
  • 白骑士的Java教学基础篇 2.5 控制流语句 白骑士所长 Java教学java开发语言
    欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘
  • android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android更改窗口的层次
    最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何
  • Python入门之Lesson2:Python基础语法 小熊同学哦 Python入门课程python开发语言算法数据结构青少年编程
    目录前言一.介绍1.变量和数据类型2.常见运算符3.输入输出4.条件语句5.循环结构二.练习三.总结前言欢迎来到《Python入门》系列博客的第二课。在上一课中，我们了解了Python的安装及运行环境的配置。在这一课中，我们将深入学习Python的基础语法，这是编写Python代码的根基。通过本节内容的学习，你将掌握变量、数据类型、运算符、输入输出、条件语句等Python编程的基础知识。一.介绍1
  • Android应用性能优化 轻口味 Android
    Android手机由于其本身的后台机制和硬件特点，性能上一直被诟病，所以软件开发者对软件本身的性能优化就显得尤为重要；本文将对Android开发过程中性能优化的各个方面做一个回顾与总结。Cache优化ListView缓存：ListView中有一个回收器，Item滑出界面的时候View会回收到这里，需要显示新的Item的时候，就尽量重用回收器里面的View；每次在getView函数中inflate新
  • 高考后该不该给孩子买电脑，什么情况能买？什么情况不能买？ 寻求改变
    我知道家长们很担心，怕买了电脑小孩沉迷游戏，耽误了学业，也不利于身体健康。对于准大学生来说，基本上在18岁左右，也不算小了，但在很多父母眼里，依旧是个小孩子。数据显示，这种情况是有发生的，大学生约70%的电脑主要被用于玩网络游戏，如果没有养成一个用良好的习惯，对孩子影响是非常大的。我总结为三买，三不买。最近有看到群里很多家长再问，小孩上大学该不该给他买电脑，要买和不买两种观点的家长都有，那么哪种情
  • ESP32-C3入门教程 网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能 小康师兄 ESP32-C3入门教程https服务器esp32OTAMQTT
    文章目录一、前言二、软件流程三、部分源码四、运行演示一、前言本文基于VSCodeIDE进行编程、编译、下载、运行等操作基础入门章节请查阅：ESP32-C3入门教程基础篇①——基于VSCode构建HelloWorld教程目录大纲请查阅：ESP32-C3入门教程——导读ESP32-C3入门教程网络篇⑨——基于esp_https_ota实现史上最简单的ESP32OTA远程固件升级功能二、软件流程
  • 放松的一天 4da9b7687fa0
    20190325总结起床07:20图片发自App睡觉:23:00天气:晴今日任务清单学习·信息·阅读•水滴阅读Day40Alice’sAdventuresinWonderlandChapter6.2图片发自App•BBC跟读训练营Day24图片发自App图片发自App图片发自App•潘多拉口语训练营Day6Wow.Whatabigboy!•文化知识学习今日无•阅读时间地狱健康·饮食·锻炼•饮食目标
  • redis学习笔记——不仅仅是存取数据 Everyday都不同 returnSourceexpire/delincr/lpush数据库分区redis
    最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷）   1、关于JedisPool.returnSource(Jedis jeids)   这个方法是从red
  • SQL性能优化-持续更新中。。。。。。 atongyeye oraclesql
    1 通过ROWID访问表--索引 你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 2 共享SQL语句--相同的sql放入缓存 3 选择最有效率的表
  • [JAVA语言]JAVA虚拟机对底层硬件的操控还不完善 comsci JAVA虚拟机
         如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？ 那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ &n
  • lvs- real 男人50 LVS
    #!/bin/bash # # Script to start LVS DR real server. # description: LVS DR real server # #.  /etc/rc.d/init.d/functions VIP=10.10.6.252 host='/bin/hostname' case "$1" in sta
  • 生成公钥和私钥 oloz DSA安全加密
    package com.msserver.core.util; import java.security.KeyPair; import java.security.PrivateKey; import java.security.PublicKey; import java.security.SecureRandom; public class SecurityUtil {
  • UIView 中加入的cocos2d，背景透明 374016526 cocos2dglClearColor
    要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
  • mysql常用命令 香水浓 mysql
    连接数据库 mysql -u troy -ptroy 备份表 mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 恢复表（与恢复数据库命令相同） mysql -u troy -ptroy mm_database < user.sql 备份数据库 mysqldump -u troy -ptroy
  • 我的架构经验系列文章 - 后端架构 - 系统层面 agevs JavaScriptjquerycsshtml5
    系统层面： 高可用性 所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速
  • 利用ant进行远程tomcat部署 aijuans tomcat
    在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 1.配置tomcat的用户角色
  • 获取复利总收入 baalwolf 获取
           public static void main(String args[]){         int money=200;         int year=1;         double rate=0.1; &
  • eclipse.ini解释 BigBird2012 eclipse
    大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 Overview 1、Eclipse.ini的作用 Eclipse startup is controlled by th
  • AngularJS实现分页功能 bijian1013 JavaScriptAngularJS分页
            对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。   &nbs
  • [Maven学习笔记三]Maven archetype bit1129 ArcheType
    archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等.   mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式，   mvn archetype   1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener
  • 【Java命令三】jps bit1129 Java命令
    jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看   [hadoop@hadoop bin]$ jps -help usage: jps [-help] jps [-q] [-mlvV] [<hostid>] Definitions: <hostid>: <hostname>[:
  • ZABBIX2.2 2.4 等各版本之间的兼容性 ronin47
    zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点 客户端AGENT兼容 zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p
  • unity 3d还是cocos2dx哪个适合游戏？ brotherlamp unity自学unity教程unity视频unity资料unity
    unity 3d还是cocos2dx哪个适合游戏？ 问：unity 3d还是cocos2dx哪个适合游戏？ 答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2，
  • 百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序 bylijinnan java算法面试百度招聘
    import java.util.Arrays; /** * 最早是在陈利人老师的微博看到这道题： * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K * 设计一个排序算法。It should be faster than O(n*lgn)。
  • 获取checkbox复选框的值 chiangfai checkbox
    <title>CheckBox</title> <script type = "text/javascript"> doGetVal: function doGetVal() { //var fruitName = document.getElementById("apple").value;//根据
  • MySQLdb用户指南 chenchao051 mysqldb
    原网页被墙，放这里备用。 MySQLdb User's Guide Contents Introduction Installation _mysql MySQL C API translation MySQL C API function mapping Some _mysql examples MySQLdb
  • HIVE 窗口及分析函数 daizj hive窗口函数分析函数
    窗口函数应用场景： （1）用于分区排序 （2）动态Group By （3）Top N （4）累计计算 （5）层次查询 一、分析函数 用于等级、百分点、n分片等。 函数             说明 RANK()     &nbs
  • PHP ZipArchive 实现压缩解压Zip文件 dcj3sjt126com PHPzip
    PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。 一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11
  • 精彩英语贺词 dcj3sjt126com 英语
    I'm always here              我会一直在这里支持你                &nb
  • 基于Java注解的Spring的IoC功能 e200702084 javaspringbeanIOCOffice
                                      
  • java模拟post请求 geeksun java
    一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。 此处用HttpComponents的httpclient来完成使命。 import org.apache.http.HttpEntity ; import org.apache.http.HttpRespon
  • Swift语法之 ---- ?和!区别 hongtoushizi ?swift!
    转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html   Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错： var stringValue : String //
  • centos7安装jdk1.7 jisonami jdkcentos
    安装JDK1.7 步骤1、解压tar包在当前目录 [root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 步骤2：配置环境变量 在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1.7.0_75 export CLASSPATH=/usr/java/jdk1.7.0_75/lib
  • 数据源架构模式之数据映射器 home198979 PHP架构数据映射器datamapper
    前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。   一、概念 数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 &nb
  • 在Python中使用MYSQL pda158 mysqlpython
    缘由 　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到 数据库中。 　　了解到 Python在这方面有优势，便选用之。 　　由于我有台 server上面安装有 mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里 记录一下，大家共勉。 　　 python中mysql的调用 　　 百度之后能够通过MySQLdb进行数据库操作。
  • 单例模式 hxl1988_0311 java单例设计模式单件
    package com.sosop.designpattern.singleton; /* * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点 * * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件 * * 必须考虑到并发情况下创建了多个实例对象 * */ /** * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率
  • 27种迹象显示你应该辞掉程序员的工作 vipshichg 工作
    1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他