WEB存储

2019-04-09 本文已影响0人致自己_cb38

一、COOKIE

小饼干，保存在客户端的一个小的文档。每次通信的时候传递给服务器端。服务器端可以依靠这个数据进行一系列操作，比如判断用户是否是登录状态。
cookie一般是服务器要求本地客户端记录的一部分数据。类似于名牌，门禁卡。COOKIE是具有过期时间的，过期之后自动删除。依赖于本地机器删除一个小文件。
COOKIE只能在本域名之间的不同页面进行数据交互，不能再不同的域名进行交互。
COOKIE的数据是在每一次进行数据请求的时候自动携带，自动传输。

1．COOKIE的局限性

1.每一次请求都会自动带上COOKIE的所有数据，会影响到网站的性能。

2.COOKIE保存的数据不能太大，一般限制是4K。

3.COOKIE在本地的操作非常不方便（JS）。

2．JS操作COOKIE

document.cookie 获取出COOKIE
COOKIE的值是一个字符串，不管有多少个COOKIE，都是保存在一个字符串里面的，每一个值之间使用分号隔开，每一个值都是键值对的形式存在的。格式如下

key1=value1;key2=value2;keyn=valuen;

JS并没有提供给我们操作COOKIE的直接方法，增删改查：
1)增

function setCookie(c_name,value,expiredays){
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
//键名 + = + 值（编码）+ ；+ 过期时间
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

2)删

function deleteCookie(c_name){
    var exdate = new Date();
    exdate.setDate(exdate.getDate()-1);
    document.cookie=c_name+ "=1;expires="+exdate.toGMTString();
}

3)改
cookie本身的机制会自动识别设置的key是否具有，如果有那么就自动修改，如果没有那么就是新增。

setCookie（）

4)查

function getCookie(c_name){
//检测是否具有cookie
if (document.cookie.length>0)
  {
  //查询是否存在这样的一个cookie
  c_start=document.cookie.indexOf(c_name + "=")
  //是否具有这个cookie
  if (c_start!=-1)
    {
    //不是第一个cookie
    if(c_start!=0){
        //案例：获取含有name的键名，如aname = ；name = ；username = 
//c_start-1：获取的键名首字母（n）的前一个字符
        var s = document.cookie.charAt(c_start-1);
        // 是不是完全匹配键名 如果键名首字母（n）的前一个字符不是空格，那么匹配的就是当前的键名
        while(s!=' '){
//c_start+c_name.length：键名=
            c_start = document.cookie.indexOf(c_name+"=",c_start+c_name.length);
            if(c_start==-1){
                //没找到结束
                return '';
            }
            s = document.cookie.charAt(c_start-1);
        }

    }
    //获取出值的第一个位置
    c_start=c_start + c_name.length+1;
    //获取结束位置 从第一个开始查询到；结束
    c_end=document.cookie.indexOf(";",c_start)
    //处理最后一个cookie的结束位置
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    }
  }
return ""
}

3．使用字符串切割法操作cookie

function getCookie(name){ 
   var strCookie=document.cookie; 
   var arrCookie=strCookie.split("; "); 
   for(var i=0;i<arrCookie.length;i++){ 
        var arr=arrCookie[i].split("="); 
        if(arr[0]==name)return arr[1]; 
    } 
return ""; 
}

4．面向对象的方式操作Cookie

(function () {
    function Cookie() {
    }
    /**
     * 获取指定的cookie
     * @param key
     * @returns {undefined}
     */
    Cookie.prototype.get = function (key) {
        this.clear();
        var cookie = document.cookie;
        var cookies = cookie.split(';');
        var value = undefined;
        cookies.forEach(function (c, index) {
            var tmp = c.split('=');
            if (tmp[0] && tmp[0].trim() === key) {
                if (tmp.length <= 1) {
                    return null;
                }
                value = tmp[1];
            }
        })
        return value;
    }
 
    /**
     * 设置cookie
     * @param key
     * @param value
     * @param exdays
     */
    Cookie.prototype.set = function (key, value, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = 'expires=' + d.toUTCString();
        document.cookie = key + '=' + value + '; ' + expires;
    }
 
    /**
     * 清除cookie
     * @param key
     */
    Cookie.prototype.clear = function (key) {
        /**
         * 清除指定的cookie
         */
        if (key)
            this.set(key, '', -1);
        else {
            /**
             * 清除所有cookie
             */
            var keys = this.keys();
            var _this = this;
            keys.forEach(function (item, index) {
                _this.set(item, '', -1);
            })
        }
    }
 
    /**
     * 获取所有cookie名
     * @returns {Array}
     */
    Cookie.prototype.keys = function () {
        var cookie = document.cookie;
        var cookies = cookie.split(';');
        var keys = [];
        cookies.forEach(function (c, index) {
            var tmp = c.split('=');
            keys[index] = tmp[0].trim();
        })
        return keys;
    }
 
    /**
     * 挂载Cookie
     * @type {Cookie}
     */
    window.Cookie = Cookie;
})(window);

5．找开源（js-cookie）

github： https://github.com/js-cookie/js-cookie

1) 创建

//创建简单的cookie

Cookies.set('name', 'value');

//创建有效期为7天的cookie

Cookies.set('name', 'value', { expires: 7 });

//为当前页创建有效期7天的cookie

Cookies.set('name', 'value', { expires: 7, path: '' });

2) 取值

Cookies.get('name'); // => 'value'

Cookies.get('nothing'); // => undefined

//获取所有cookie

Cookies.get(); // => { name: 'value' }

3) 删除值

Cookies.remove('name');

//如果值设置了路径，那么不能用简单的delete方法删除值，需要在delete时指定路径

Cookies.set('name', 'value', { path: '' });

Cookies.remove('name'); // 删除失败

Cookies.remove('name', { path: '' }); // 删除成功

//注意，删除不存在的cookie不会报错也不会有返回

二、 WEB 存储

1．localStorage

用于长久保存真个网站的数据，保存的数据没有过期时间，直到手动去除，没有数据量大小的限制。
但是这个机制在前后端不会主动传输，所以它更多的是前端程序员的一种存储机制，不需要每一次传输的数据保存在local，需要每一次传输的还是要保存在cookie。
实用：有时需要有时不需要的数据需要的时候从local取出来放入cookie，用过后删除。

1) 检测浏览器是否支持本文存储

if(typeof(Storage)!=="undefined") { 

// 是的! 支持 localStorage sessionStorage 对象! 

// 一些代码..... 

} else {

// 抱歉! 不支持 web 存储。 

}

image.png

2) 操作手段

保存数据：

localStorage.setItem(key,value);

读取数据：

localStorage.getItem(key);

删除单个数据：

localStorage.removeItem(key);

删除所有数据：

localStorage.clear();

得到某个索引的key：

localStorage.key(index);

2．sessionStorage

sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

但是在本网站的不同页面之间是存在的。

1) 操作

增、改

sessionStorage.[name] = value;

删

Delete sessionStorage.[name]

查

sessionStorage.[name]

3．WEB SQL数据库

集成在浏览器上的一个小型数据库。兼容不是很高。操作和普通的关系型数据库完全一样。执行的也是标准的SQL语句。具有数据库数据表数据行这些概念。

三、离线缓存

缓存 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
缓存文件格式：

//缓存

CACHE MANIFEST

1. css

2. js

3. Png

//访问网络

NETWORK:

1. php

2. Jsp

//报错

FALLBACK:

//整个文件夹 报错后调用的文件  /html/ error.html

参考文献：http://www.runoob.com/html/html5-app-cache.html

四、 Web Worker

jss本身是单线程的。从上到下依次执行，依次执行每一个script。子线程不能使用jQuery

1．操作系统的概念

进程：一个软件就是一个进程或者多个进程。
线程：进程的进一步划分，划分线程就是为了任务调度。
4核8线程：4个核心，8个线程。CPU发展进步，但还是不够。
任务调度：一个计算机只有一颗CPU，一颗CPU同一个时间只能执行一件事情（计算一个操作），但是我们需要聊天，同时上网，打游戏。
时间分片，把任务分线程分片。

2．概念

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。类似于游戏中的支线任务。

3．浏览器兼容检测

if(typeof(Worker) !== undefined){
        // 是的! Web worker 支持!
        // 一些代码.....
}else{
        //抱歉! Web Worker 不支持 单线程的运行
}

4．创建线程

if(w == undefined){
        w=new Worker("demo_workers.js");
}

5．主线程注册监听事件

w.onmessage=function(e){
        e.data; //传过来的数据
};

6．Worker线程发送消息

postMessage()

7．worker接收主线程的数据

//使用postMessage()返回消息
addEventListener(‘message’,function(e){

});
self.addEventListener(‘message’,function(e){

});
this.addEventListener(‘message’,function(e){

});

8．主线程关闭子线程

w.terminate();

9．子线程关闭自己

close();
self.close();
this.close();

10．子线程加载脚本

父线程加载脚本

script src = “”

子线程加载脚本

importScripts(‘1.js’);
importScripts(‘1.js’,‘2.js’);

11．主线程可以监听子线程的错误

w.onerror = function(){

}

案例：

let w;
    // 判断浏览器是否支持worker
    if(typeof(Worker) !== undefined) {
        // 判断是否开启线程
        if(w == undefined) {
            w = new Worker("worker.js");

//postMessage()发送消息
//接收消息
            w.onmessage = function(e) {
                doSomething(JSON.parse(e.data));
                w.terminate();
            };
//接收错误
            w.onwrong = function(){

            }
        }
        function doSomething(data){
            let nav = $('#nav');
            for (var i = 0; i < data.length; i++) {
                let div = $('<div></div>');
                let img = $('<img>');
                let p = $('<p></p>');
                img.attr('src',data[i].url);
                p.text(data[i].title);
                div.append(img);
                div.append(p);
                nav.append(div);
            }
        }
    } else {
        document.getElementById("dd").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
    }

五、拖拽

h5之前拖拽是一个复合事件：多个事件的组合。
onmousedown
=>onmousemove
=>onmouseup
h5提供了完整的拖拽机制。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

1．Draggable

设置元素可以拖放：

<img draggable = “true”>

2．拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型（属性）和值（属性值）：

function drag(ev){
    ev.dataTransfer.setData("id",ev.target.id);
}

3．放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

4．进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
}

代码解释：

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中

image.png

案例单独拖放和双重拖放：

image.png
image.png

一、 WEB SOCKET

这是一种全新的通信模式。主要用来实现web的即时通讯。依赖于http。

他的诞生主要是用来弥补http本身的缺陷。

HTTP：超文本传输协议。

socket：套接字

模拟在线的机制：

轮询：ajax（页面无刷新技术，在不刷新页面的情况下实现某些功能） + 定时器

只能客户端访问服务器，向服务器间隔发送/获取数据（一次请求对应一次响应）

缺点：严重影响网页性能

时间间隔怎么控制？

image.png

1．两种检测方式

// 检测WebSocket属性是否在window里
    if ("WebSocket" in window) {
        console.log('浏览器支持WebSocket');
    }else{
        console.log('浏览器不支持WebSocket');
    }
    // 检测WebSocket是否是undefined数据类型
    if (typeof WebSocket == undefined) {
        console.log('浏览器支持WebSocket');
    }else{
        console.log('浏览器不支持WebSocket');
    }

2．建立连接

第一个参数url指定连接的URL。第二个参数protocol是可选的，指定了可接受的子协议。

image.png

3．绑定open事件

socket.onopen = function(){

};

4．绑定消息接收事件

socket.onmessage = function(){

};

5．绑定错误处理事件

socket.onclose = function(){

};

6．绑定关闭响应事件

socket.onerror = function(){

};

7．客户端发送消息

Socket.send();

案例：

let socket;
        // 检测WebSocket属性是否在window里
        if("WebSocket" in window){
            console.log('浏览器支持websocket');
            // 建立连接
            socket = new WebSocket('ws://127.0.0.1:9999');
            socket.onopen = function(e){
                socket.send('数据正在发送');
                console.log('连接已经建立')
            };
            socket.onmessage = function(e){
                console.log('受到消息')
            };
            socket.onclose = function(e){
                console.log('连接已经关闭')
            };
            socket.onerror = function(e){
                console.log('连接错误')
            };
        }else{
            console.log('浏览器不支持websocket');
        }

WEB存储

一、COOKIE

1．COOKIE的局限性

1.每一次请求都会自动带上COOKIE的所有数据，会影响到网站的性能。

2.COOKIE保存的数据不能太大，一般限制是4K。

3.COOKIE在本地的操作非常不方便（JS）。

2．JS操作COOKIE

3．使用字符串切割法操作cookie

4．面向对象的方式操作Cookie

5．找开源 （js-cookie）

1) 创建

2) 取值

3) 删除值

二、 WEB 存储

1．localStorage

1) 检测浏览器是否支持本文存储

2) 操作手段

2．sessionStorage

1) 操作

3．WEB SQL数据库

三、 离线缓存

四、 Web Worker

1．操作系统的概念

2．概念

3．浏览器兼容检测

4．创建线程

5．主线程注册监听事件

6．Worker线程发送消息

7．worker接收主线程的数据

8．主线程关闭子线程

9．子线程关闭自己

10．子线程加载脚本

11．主线程可以监听子线程的错误

五、拖拽

1．Draggable

2．拖动什么 - ondragstart 和 setData()

3．放到何处 - ondragover

4．进行放置 - ondrop

一、 WEB SOCKET

1．两种检测方式

2．建立连接

3．绑定open事件

4．绑定消息接收事件

5．绑定错误处理事件

6．绑定关闭响应事件

7．客户端发送消息

猜你喜欢

热点阅读

5．找开源（js-cookie）

三、离线缓存