JS学习笔记9

最新推荐文章于 2022-10-28 11:51:41 发布

小华仔仔

最新推荐文章于 2022-10-28 11:51:41 发布

阅读量209

点赞数

文章标签： javascript 学习

本文链接：https://blog.csdn.net/xiaohua307/article/details/123172377

版权

html5存储

           html5存储和cookie的区别
           1.cookie存储在浏览器下，html5存储在磁盘中
           2.cookie在服务端发送，html5在客户端使用
           3.cookie需要联网使用，html5可以不用网络
           4.cookie最多存储4kb，html5看磁盘大小
           5.cookie有时间周期，到时间会自动删除，html5除非手动删除，否则一直存在
        cookie存储
cookie用来存储页面的值，一个网站共享一套cookie，cookie并不是浏览器提供的，是由程序员自己创建的，一个文件大小不得超过4kb，每个网站能存储20个左右，在一定期限内cookie会过期
           操作
               document.cookie 设置或返回cookie
               注意：如果cookie不给设置时间，则浏览器关闭会消失
               时间属性expires是固定的，用日期类型定义
           自己封装cookie操作方法

function getcookie(attr){ //查询
    var cok=document.cookie
    var arr=cok.split(";")
    for(var i=0;i<arr.length;i++){
        var x=arr[i].split("=")
        if(x[0].trim()==attr){ return x[1] }
    }
}
function setcookie(attr,value,time){  //添加，修改
    document.cookie=attr+"="+value+";expires="+time
}
function deletecookie(attr){  //删除
    var t=new Date()
    t.setDate(t.getDate()-1)
    document.cookie=attr="=;expires="+t
}

           cookie作用：登录状态，跟踪用户行为，定制页面，创建购物车
       html5本地存储
           sessionStorage：会话型存储，在浏览器关闭之后，数据会自动消失
           localStorage：本地型存储，除非程序员手动删除，否则一直存在
           属性和方法
           1.clear()清空数据
           2.key()遍历数据
           3.getItem(attr)获得数据
           4.setItem(attr,value)设置属性值

database前端数据库

           属性和方法
           1.openDatabase(数据库名称，版本，说明，大小) 创建数据库
           2.transaction(执行函数,错误函数,成功函数)执行事务的提交和回滚
           3.executeSql(sql语句，成功函数，错误函数) 执行sql语句函数
           4.result.rows.length 获得信息的个数
           5.result.rows.item(i)获取第几条信息
           6.result.rows.item(i)[字段名] 获得属性信息
           sql语句
           创建表
           create table if not exists 表名(
               id REAL UNIQUE , //主键不能为空，必须唯一
               name TEXT,
               age INTEGER
           )
           添加
           insert into 表名(字段名1,字段名2) values(?,?)[1,"lisi"]
           修改
           update 表名 set age="",name="" where id=1
           删除
           delete from 表名 where id=1
           查询
           select * from 表名查所有
           select * from 表名 where id=1 按条件查询
           select name,age from 表名查部分字段
       web worker对象（异步函数）
           js本身是单线程处理，通过web worker可以模拟多线程，虽然单线程处理比较安全，
           但是如果处理时间过长，就会处于无响应的状态，所以可以用多线程来进行解决
           1.创建web worker对象
           var w=new Worker("js文件路径")
           2.发送数据
           w.postMessage(要发送的值)
           3.接收数据
           w.onmessage=function(value){
               value是接收的数据
           }
           4.w.οnerrοr=function(error){
               error.message输出错误信息
           }
           5.结束进程
           w.close()
       测试斐波那契数列
           单线程例子
           btn1.οnclick=function(){ //向文本框写数据
           var v=document.getElementById("invalue")
           document.getElementById("outvalue").value=fei(v)
               }
           btn2.οnclick=function(){ //测试进程
           alert("进程没有卡死")
                   }
            function fei(n){ //斐波那契数列
               if(n<=2){
           return 1
               }else{
           return fei(n-1)+fei(n-2)
               }
                   }
           多线程例子
           页面的函数
           var btn1 = document.getElementById(".btn1")
           var btn2 = document.getElementById(".btn2")
           btn1.onclick = function () { //计算结果
           var v = document.getElementById("invalue").value
           if (typeof Worker != "undefined") {
       var w = new Worker("js/test.js")
       w.postMessage(parseInt(v)) //发送
       w.onmessage=function(){
       document.getElementById("outvalue").value=res.data
           }
           } else {
           alert("不支持多线程")
               }
           }
           js下的函数
           onmessage=function(res){
               var n=res.data
               var sum=fei(n)
               postMessage(sum) //发送
           }
           function fei(n){
               if(n<=2){
               return 1
               }else{
               return fei(n-1)+fei(n-2)
               }
           }
       文件操作
           js有两种机制：一个事件机制，一个是io机制
           文件操作对象
               Blob 通过二进制数据读取
               file 读取单个文件对象
               fileList 读取多个文件对象
               fileReader 把文件按字节读取
           fill和fillList的方法
               name获得文件名称
               size获得字节大小
               type 获得文件类型
               lastModifiedDate 最后修改日期
           单文件上传
               var file=document.querySelector(".file").files[0]
               var h1=document.querySelector(".font")
               h1.innerHTML="文件名称："+file.name+"<br>"+
                "自己长度："+file.size+"<br>"+
                "最后修改日期："+file.lastModifiedDate+"<br>"+
                "文件类型："+file.type+"<br>"
           多文件上传
               var file=document.querySelector(".file").files
               var name=""
               for(var i=0;i<file.length;i++){
               name+=file[i].name
               }
           fileReader
           事件操作
               onloadstart 获取文件时触发
               onprogress读取过程中触发
               onload读取文件成功完成时触发
               onabort读取文件中断时触发
               onerror读取文件错误时触发
               onloadend读取文件完成时触发(无论成功与否)
           属性和方法
               readAsBinaryString(file) 以二进制形式读取
               readAsText(file,字符集) 以某种字符编码读取
               readAsDataURL()以字符串形式读取文件，保存的是对象类型，可以获得对象
               result获取读取处理对象的信息
               loaded获取当前文件的字节数
               abort()中断读取数据
               slice(开始，步长)分段读取
               slice() 处理兼容性，添加浏览器前缀
       文件拖拽
           <img draggable="true"> 设置文件可拖拽
           DataTransfer 拖拽对象
           事件操作
               ondragstart 鼠标放在拖拽元素上开始触发
               ondragenter 拖拽元素进入目标元素触发
               ondragover 拖拽元素在当前目标元素上移动进行触发
               ondrop 拖拽元素进入目标元素，并且鼠标松开时触发
               ondragend 拖拽元素完成拖拽后进行触发
           属性和方法
               getData() 获得数据
               setData(url/text,对象/文本内容) 设置文本或标签内容
               preventDefault() 启动元素放置事件
               dropEffect 被拖动元素的权限设置
               none 不能将元素放在目标元素上
               move 可以移动元素在目标元素上
               copy 将拖拽元素进行复制
               link 打开拖动元素的地址
               effectAllowed 允许拖动的效果
               none 被拖拽的元素不能有任何行为
               copy 只允许复制
               move 只移动
               link 只允许打开链接
               copyLink 允许复制和打开链接
               linkMove 允许打开链接和移动
               copyMove 允许复制和移动