数据持久化操作

一、数据持久化操作  cookie

      描述：也叫数据本地化，是一种将数据长久的保存在客户端的技术操作

      作用：由于cookie是存储在客户端本地的，因此可以作为必要信息的容器

      语法：cookie的设置方案有两种  分为前端和后端

                前端：写入：document.cookie=‘key=value;expires=过期时间’；

                                    var expires=new Date(new Date().getTime()+10*1000).toGMTString();

                                    document.cookie='username=yangjie;expires='+expires;

                          读取：console.log(document.cookie);

                          删除：document.cookie='key=value;expires=当前时间+1'；

                                    var expires=new Date(new Date().getTime()).toGMTString();

                                    document.cookie='username=yangjie;expires='expires+1;            

                后端：后端为前端添加cookie（谁访问php 谁就添加cookie）

                          设置cookie：setcookie('key','value','expires','path','domain')

                          读取cookie：使用$_COOKIE对象直接获取cookie

                          删除cookie：setcookie('key','value','expires','path','domain')

二、localStorage 和 sessionStorage

      区别：localStorage中存储的数据，只要不被用户主动删除就会永远保存

                sessionStorage中存储的数据，只要用户不关闭页面，就一直存在，直到关闭为止

      说明：获取两者不存在的key值，返回null

      语法：

           ***.setItem('key','value');

           ***.getItem('key');

           ***.removeItem('key');

三、webworker 

       描述：一种能够在后台处理执行js脚本的html5技巧，能够使脚本的运行变得悄无声息，不影响页面的运作，类似异步

       语法：1、在页面中的部分

var worker = new Worker('想要执行的js文件路径');

worker.onmessage=function(eve){  console.log(eve.data) };

                  2、在js中的部分

                       postMessage(回传信息)

四、FileReader

      描述：html5中提供的用来对input文件上传操作进行处理的对象，该对象中提供的方法能够对上传文件的内容进行预先读写

                在某些情况下，可以达到‘预览’的效果

      说明：读写方式：文本读取，图片读取，二进制读取

      语法：var fileReader=new FileReader();

                文本读取：

fileReader.readAsText(从input中获取的文件流)

fileReader.οnlοad=function(){

               console.log(fileReader.result);

     }

                图片读取:

fileReader.readAsDataURL(从input中获取的文件流)

fileReader.οnlοad=function(){

                console.log(fileReader.result);

     }

五、物理定位geoLocation

描述：html5为了对设备提供更好的实时位置服务，开放了coordinate定位，用户可以通过navigator.geolocation来使用，因              为定位服务涉及用户隐私，所以必须在设置了https的服务器上才能正确加载

六、获取设备getUserMedia

描述：html5为了能够更容易地获取用户的设备，以便提供信息采集，在navigator对象中提供一个getUserMedia的方法，本方            法用来获取用户的多媒体设备

说明：获取设备一般和canvas标签配合使用，以便达到“实时采集”

语法：1、兼容性

navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGeUserMedia;

          2获取设备

navigator.getUserMieda({获取设别类型的JSON格式}，func获取多媒体流文件，func错误回调)

七、小补充

       在自定义的js外部脚本中，尽量使用IIFE，保证不对全局产生影响

       在自执行函数执行之前，添加；保证脚本正常加载