cookie

最新推荐文章于 2022-11-24 16:58:19 发布
最新推荐文章于 2022-11-24 16:58:19 发布
阅读量135 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yllmyl/article/details/80344226
版权


1.数据持久化操作1--cookie
描述：数据持久化也叫数据本地化，是一种将数据"长久"的保存在客户端的技术操作。
作用：由于cookie是存储在客户端本地的，因此可以作为一些必要信息的存储容器
  例如：一个网站的登录信息(可能不会存储用户名和密码，有泄露信息的风险)
  以便下次打开该网站的时候，不必重复执行登录操作。
语法：cookie的设置方案有两种：
  前端设置cookie
  写入cookie：document.cookie = 'key=value;expires=过期时间戳';
  读取cookie：console.log(document.cookie);
  删除cookie：document.cookie = 'key=value;expires=当前时间戳+1';
  后端设置cookie


  1.数据持久化操作2--localStorage、sessionStorage
描述：html5中提供的数据持久化操作。
区别：
  localStorage中存储的数据，只要不被用户主动删除就会永远保存。
  sessionStorage中存储的数据，只要用户不关闭页面就会一直存在，直到关闭为止。
说明：
  对于两者而言获取不存在的key值，返回null！
语法：
  xxx.setItem('key','value');
  xxx.getItem('key');
  xxx.removeItem('key');


  1.webWorker
描述：一种能够在“后台”处理执行js脚本的html5技巧
  能够使得脚本的运行变的悄无声息，而且不会影响页面的运作
  类似于【异步】的概念
  并不是真的在php后台处理脚本。
语法：
  (1)在页面中的部分
    //创建一个【webWorker】，并告诉他需要后台执行的文件名
  var worker = new Worker('想要悄无声息执行的js文件路径');
  //当后台执行的文件发出通知的时候，自动执行的回调函数。
  worker.onmessage = function (eve){
console.log(eve.data);
  };
  (2)在js文件中的部分
    在js文件中任何位置，都可以通过
    postMessage(回传信息);
    来通知页面中的【webWorker】，这个悄无声息的任务已经执行完毕。


1.获取设备getUserMedia
描述：html5为了能够更容易的获取用户的设备，以便提供信息采集
  在navigator对象中提供了一个叫做getUserMedia的方法
  本方法用来获取用户的多媒体设备
说明：获取设备一般和canvas标签配合使用，以便达到“实时采集”的目的。
语法：
  (1)做兼容性：
  navigator.getUserMedia = nagigator.getUserMedia ||
                           navigator.webkitGetUserMedia ||
                           navigator.mozGetUserMedia;
  (2)获取设备：
  navigatior.getUserMieda({获取设备类型JSON格式}, func获取多媒体流文件，func错误回调);





<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#myvideo{
width:250px;
height:200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<video src="" id="myvideo"></video>
<canvas id ="mycanvas"></canvas>
<img src=''>
<button id ="openVideo">视频</button>
<button id ="snapshot">截图</button>
<!-- <button>点我加cookie</button> -->
<!-- <button>点我之后开始悄无声息的执行js</button> -->


<!-- <video id='myvideo' src=''></video>
<button class="playVideo">开启视频</button>
 -->
</body>

<script>

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


var tempValue = escape('张先生');
document.cookie = 'username='+tempValue+';expires='+expires;



    document.cookie = 'username=frank;expires='+expires;
   console.log(document.cookie);
    var cookie = document.cookie;
    var obj = {};
    var arr = cookie.split('=');
    obj[arr[0]] = arr[1];
    console.log(unescape(obj.username));




document.querySelector('button').onclick = function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState ==4){
if(xhr.status == 200){
console.log(xhr.responseText);
}
}
};
xhr.open('get','cookie.php',true);
xhr.send();
}


console.log(document.cookie);
function getCookie(key){
var cookie = document.cookie;
if(cookie){
var obj ={};
var arr = cookie.split(';');
for(var i=0;i<arr.length;i++){
var temArr =arr[i].split('=');
obj[tempArr[0]] = temArr[1];
}
return obj[key];
}else{
return'';
}
}
var value = unescape(getCookie('username'));
console.log(value);



var frankInfo ={
fname:'frank',
fage:'18',
fgender:'male',
};
var jsonStr = JSON. stringify(frankInfo);
function getCookie(key){
var cookie = document.cookie;
if(cookie){
var obj = {};
var arr = cookie.split(';');
for(var i=0; i<arr.length; i++){
var tempArr = arr[i].split('=');
obj[tempArr[0]] = tempArr[1];
}
console.log(obj);
return obj[key];
}else{
return '';
}
}
var frankInfo = getCookie(' frankInfo');
// console.log(JSON.parse(frankInfo));

document.querySelector('button').onclick = function (){
添加
localStorage.setItem('username','frank');
localStorage.setItem('password','123456');
读取
console.log(localStorage.getItem('username1'));
删除
localStorage.removeItem('password');




sessionStorage.setItem('username','frank');
sessionStorage.setItem('password','123546');



webworker
var num = 1;
setInterval(function(){
console.log(num++);
},1000);
document.querySelector('button').onclick = function(){
var worker = new Worker('cookie.js');
worker.onmessage = function(eve){
console.log(eve.data);
}
};

document.querySelector('button').onclick = function(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(doSthFunc,errFunc);
}else{
alert('您的浏览器不支持')
}
}
        //window.close();
}



//(2)对获取定位方法提供【成功回调】【失败回调】
function doSthFunc(position){
alert(position);
console.log(position.coords.latitude, position.coords.longitude);
}
function errFunc(error){
switch(error.code){
    case error.PERMISSION_DENIED:
      alert("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Location information is unavailable.");
      break;
    case error.TIMEOUT:
      alert("The request to get user location timed out.");
      break;
    case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.");
      break;
    }
}
};





1.物理定位geoLocation
描述：html5为了对设备提供更好的实时位置服务，开放了coordinate定位
  用户可以通过navigator.geolocation来使用他们
注意：因为定位服务涉及到用户的隐私，
  因此必须在设置了https的服务器上才能正确加载
语法：
//(1)询问用户设备，当前是否支持定位
if(navigator.geolocation){
//使用getCurrentPosition()获取用户当前位置
navigator.geolocation.getCurrentPosition(doSthFunc, errFunc);
}else{
//提示用户不支持定位
alert('您的浏览器不支持定位功能！');
//window.close();
}



//(2)对获取定位方法提供【成功回调】【失败回调】
function doSthFunc(){
alert(position);
console.log(position.coords.latitude, position.coords.longitude);
}
function errFunc(){
switch(error.code){
    case error.PERMISSION_DENIED:
      alert("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Location information is unavailable.");
      break;
    case error.TIMEOUT:
      alert("The request to get user location timed out.");
      break;
    case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.");
      break;
    }
}



var video = document.querySelector('#myvideo');
document.querySelector('.playVideo').onclick = function (){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia({
video:true,
audio:true
}, function (stream){
//让设备采集到的信息，实时加载到video标签中
var URL = window.URL || window.webkitURL;
video.src = URL.createObjectURL(stream);
//让视频播放
video.play();
}, function(error){
console.log(error);
});
}


var video = document.getElementById('myvideo');
var canvas = document.querySelector('#mycanvas');
var bicaso = canvas.getContext('2d');
// var img = document.querySelector('img');
var mediaStream = null;


document.getElementById('openVideo').onclick = function (){
// 做兼容
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        // 调用方法
        navigator.getUserMedia({
        //调用的设备类型
        video:true,
        audio:true
        },function(stream){
        // 把视频流转成地址
        var URL = window.URL || window.webkitURL;
        video.src = URL.createObjectURL(stream);
        //console.log(video.src)  
        video.play();
        //
        mediaStream = stream;
        },function(error){
        console.log(error);
        });
};


document.querySelector('#snapshot').onclick = function (){
if (mediaStream) {
        bicaso.drawImage(video, 0, 0, 250, 200);
        document.querySelector('img').src = canvas.toDataURL('image/webp');


        //
    }
};





</script>
</body>
</html> 
柳LL
关注
Chrome导出cookie的实战教程
weixin_43178406的博客
06-29 7万+
本文主要介绍了Chrome导出cookie的实战教程，希望能对使用Chrome的同学们有所帮助。 文章目录 1. 问题描述 2. 实战工具一 3. 实战工具二
【SpringBoot】21、SpringBoot中使用Cookie实现记住登录
热门推荐
Asurplus
06-28 23万+
最近在做项目，甲方提出每次登录都要输入密码，会很麻烦，要求实现一个记住登录状态的功能，于是便使用Cookie实现该功能 一、Cookie 简介 Cookie，一种储存在用户本地终端上的数据，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。 其实Cookie就是一个键和一个值构成的，随着服务器端的响应发送给客户端浏览器。然后客户端浏览器会把Cookie保存起来，当
根据两点经纬度计算距离
matriculate的专栏
03-14 1503
根据两点经纬度计算距离这些经纬线是怎样定出来的呢？地球是在不停地绕地轴旋转（地轴是一根通过地球南北两极和地球中心的假想线），在地球中腰画一个与地轴垂直的大圆圈，使圈上的每一点都和南北两极的距离相等，这个圆圈就叫作“赤道”。在赤道的南北两边，画出许多和赤道平行的圆圈，就是“纬圈”；构成这些圆圈的线段，叫做纬线。我们把赤道定为纬度零度，向南向北各为90度，在赤道以南的叫南纬，在赤道以北的叫北纬。北极就是北纬90度，南极就是南纬90度。纬度的高低也标志着气候的冷热，如赤道和低纬度地地区无冬，两极和高纬度地区无夏，
Cookie详解
骑个小蜗牛的博客
11-23 1万+
Cookie属性 上图是Chrome浏览器中的Cookie截图，cookie的属性：Name、Value、Domain、Path、Expires/Max-age、Size、HttpOnly、Secure、SameSite、SameParty、Priority。下面依次介绍这些属性。 Name Name是Cookie的名称，Cookie一旦创建，名称便不可更改，一般名称不区分大小写。 Value Value是cookie名称Name对应的Cookie的值，如果值为Unicode字符，需要为字符编码。如果值为
Cookie
qq_52025040的博客
11-24 4893
在HTTP协议中是这样规定的：当浏览器发送请求的时候，会自动携带该path下的cookie数据给服务器。表示只要是这个servlet13项目的请求路径，都会提交这个cookie给服务器。”生成的cookie，如果cookie没有设置path，默认的path是什么？这个路径以及这个路径下的子路径，cookie都会被发送到服务器。浏览器发送cookie给服务器了，服务器中的java程序怎么接收？在java的servlet中，对cookie提供了哪些支持呢？也就是说，以后只要浏览器的请求路径是。
cookie的domain属性
longgege001的博客
07-31 9万+
欢迎大家光临我的个人博客，详戳 https://545longgege.top/ 最近在改一个bug单时，有个问题涉及到了cookie的domain属性，大致场景是由于不同的服务页面出现了同名的cookie但是domain域不同，导致出现了不可思议的bug。于是查询与cookie的domain属性相关的资料并记录之。 1、什么是Cookie? Cookie是由W3C组织提出，最...
Cookie存储
m0_61649980的博客
09-29 3777
Cookie 是以字符串的形式存储在计算机浏览器中的，本身为 document对象的属性。由于其自身存储数据的限制与缺陷，一般不建议使用。 cookie 的创建 // 创建cookie document.cookie = 'name=value'; 如此，一个 cookie 数据就创建成功了。效果如下： Cookie创建成功后，须在本地服务器下的Application中查看 在其中有几个参数，这里只说常用的 第一个是键，类似于名字 第二个参数为值，，类...
Cookie和Session的区别（面试必备）
chen13333336677的博客
09-17 16万+
一、共同之处： cookie和session都是用来跟踪浏览器用户身份的会话方式。 二、区别： cookie数据保存在客户端，session数据保存在服务端。 session 简单的说，当你登陆一个网站的时候，如果web服务器端使用的是session，那么所有的数据都保存在服务器上，客户端每次请求服务器的时候会发送当前会话sessionid，服务器根据当前sessionid判断相应的用户数据标志，...
Cookie伪造
cainiao17441898的博客
05-18 4666
解题： 创建了一个user用户登陆之后发现。 抓包看一下。
EditThisCookie.crx cookie编辑导入导出利器
06-29
《EditThisCookie.crx：强大的Cookie管理工具及与curl的集成》 在互联网浏览中，Cookie扮演着重要的角色，它们存储用户信息、保持登录状态、个性化网页内容等。EditThisCookie.crx是一款专为Chrome浏览器设计的强大...
获取cookie非常好用的google插件
06-10
标题中的“获取cookie非常好用的google插件”指的是在Google Chrome浏览器上的一种扩展程序，它允许用户方便地管理和操作浏览器中的Cookie数据。Cookie是网站在用户计算机上存储的小型文本文件，用于跟踪用户偏好、...
java操作cookie示例(删除cookie)
09-04
在Java Web开发中，Cookie是一种常用的技术，用于在客户端存储和传递少量信息。本文将详细介绍如何使用Java操作Cookie，特别是如何设置、读取和删除Cookie。 首先，我们来看如何**设置Cookie**。在Java中，我们通常...
rhino grasshoper 框内物体排列（附视频）.gh
最新发布
10-18
【闭合线内物体按方向移动/排列】https://www.bilibili.com/video/BV1z1WfeSEWu?vd_source=b420114c993138474d2e93d83ead77a5
kwant-1.4.3-cp38-cp38-win_amd64.whl
10-18
kwant-1.4.3-cp38-cp38-win_amd64.whl
rhino grasshoper 景观椅（附视频）.gh
10-18
【rhino@grasshoper 曲线金属座椅景观案例（文件获取/见简介）】https://www.bilibili.com/video/BV1Dx4y147Lr?vd_source=b420114c993138474d2e93d83ead77a5
PCIe通义万问系列文档的第一部已整理完毕，含999个PCIe相关问答
10-18
《PCIe通义万问》系列文档旨在记录PCIe相关行业工程师们在PCIe协议学习、IP设计验证、产品测试及使用过程中遇到的问题、迸发的思考、进行的探讨及可能的解决方案，以期给遇到相同相似问题的同行们些许启发。文档涉及的技术方向主要为PCIe，也包含PCIe相关的CXL、UCIe及计算机体系结构相关内容。 本文档是《PCIe通义万问》系列文档之（一），含999个问题。问题内容有以下三个来源：MangoPapa（下称博主）的“PCIe每日一问一答”系列专栏；博主的博文留言及私信讨论；博主作为群主的“PCIe技术交流群”群聊内容。MangoPapa小助理、折叠、先杰、CR小队长、kangling共同完成了问答内容提取与归纳整理，噫嘘唏及慕荷负责文辞优化及编辑排版，上述人员及MangoPapa、JasonW、皮塞阿姨、席可儿参与了文档内容的审校。感谢以上人员的无私奉献。 本文档仅对讨论内容进行总结记录，不保证问题答案的正确性，部分问题只提供解决思路或讨论过程。术业有专攻，文内定有偏颇。如您发现谬误，一敬希原宥，二望乞点拨；如您持异见，欢迎来信讨论。如有需要，欢迎联系MangoPapa加入相关
毕业设计论文SpringBoot招投标管理系统.docx
10-18
毕业设计论文
Servlet获取Cookie示例
"Servlet从客户端浏览器读取Cookie的示例代码" 在Web开发中，Cookie是一种常见的技术，用于在客户端和服务器之间存储和传递信息。Servlet是Java编程语言中的一个接口，它允许开发者处理HTTP请求并生成响应。在这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值