您现在的位置是:网站首页> 编程资料编程资料
浅谈cookie和localStorage那些事如何使用localstorage代替cookie实现跨域共享数据问题
2023-10-15
406人已围观
简介 这篇文章主要介绍了浅谈cookie和localStorage那些事,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
一、localStorage、cookie、sessionStorage的区别与练习

1、cookie 小甜饼。它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在Cookie中存入一段辨别用户身份的数据来实现的。
a、生命周期:通常为关闭浏览器的时间。如果想在关闭后还可以打开,可以给cookie设置失效时间
//具体操作cookie document.cookie = "name=value;expires=date;path=path;domain=domain; secure"//path路径;domain同域名访问;**secure**只将http转为https加密传输(仅是服务器与客户端之间) document.cookie = 'username=Darren'//'username'表示 cookie 名称,'Darren'表示这个名称对应的值。假设 cookie 名称并不存在,那么就是创建一个新的 cookie;如果存在就是修改了这个 cookie 名称对应的值。 //cookie的存取 存取时必须要使用Document对象的 cookie 属性;(from w3cschool) function getCookie(c_name){ if (document.cookie.length>0){ //先判断cookie是否为空,为空就return "" c_start=document.cookie.indexOf(c_name + "=") //通过String对象的indexOf()来检查这个cookie是否存在,不存在就为 -1 if (c_start!=-1){ c_start=c_start + c_name.length+1 //最后这个+1其实是表示"="号啦,这样就获取到了cookie值的开始位置 c_end=document.cookie.indexOf(";",c_start)//indexOf()第二个参数表示指定的开始索引的位置...为了得到值的结束位置。因为需要考虑是否是最后一项,所以通过";"号是否存在来判断 if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end))//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基础,想了解的可以搜索下,在文章结尾处也会进行讲解cookie编码细节 //substring(indexStart[, indexEnd])截取一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。indexStart[, indexEnd] //escape()字符串转义 } } return "" } //通过expires来设置 cookie 的有效期。语法如下: document.cookie = "name=value;expires=date"//data:GMT(格林威治时间)格式的日期型字符串 var _date = new Date(); _date.setDate(_date.getDate()+30);//30 是保存30天的意思 _date.toGMTString(); //函数封装 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()); } //使用方法 setCookie('username','changlin',30) 在输入cookie信息时不能包含空格,分号,逗号等特殊符号,而在一般情况下,cookie 信息的存储都是采用未编码的方式。所以,在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码,在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。如设置cookie时:
document.cookie = name + "="+ escape (value)
再看看基础用法时提到过的getCookie()内的一句:
return unescape(document.cookie.substring(c_start,c_end))
这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。
2、sessionStorage 和localStorage的用法
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
location是一直存在本地。sessionStorage是浏览器关闭后就立即清除。
localStorage局限性:
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
6、相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
//用法 var students = { xiaomin: { name: "xiaoming", grade: 1 }, teemo: { name: "teemo", grade: 3 } } students = JSON.stringify(students); //将JSON转为字符串存到变量里 console.log(students); localStorage.setItem("students",students);//将变量存到localStorage里 var newStudents = localStorage.getItem("students"); newStudents = JSON.parse(students); //转为JSON console.log(newStudents); // 打印出原先对象 常用API

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相关内容
- 把富文本的回车转为br标签html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 关于前端上传文件全面基础扫盲贴(入门)HTML input file控件限制上传文件类型_动力节点Java学院整理
- HTML5 WebGL 实现民航客机飞行监控系统基于 HTML5 WebGL 实现的垃圾分类系统基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码基于 HTML5 WebGL 实现的医疗物流系统
- 基于Canvas+Vue的弹幕组件的实现前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)html5使用canvas实现弹幕功能示例HTML使用canvas实现弹幕功能HTML5 canvas实现的静态循环滚动播放弹幕
- html通过canvas转成base64的方法解决canvas转base64/jpeg时透明区域变成黑色背景的方法
- Html5新增标签与样式及让元素水平垂直居中块级元素的三种垂直水平居中的方法DIV或者DIV里面的图片水平与垂直居中的方法html中table表格的内容水平和垂直居中显示让DIV水平垂直居中的两种完美方法推荐HTML对于元素水平垂直居中的探讨
- 天天飞车道具冲突问题解决方法 天天飞车道具冲突怎么解决_手机游戏_游戏攻略_
- 爸爸去哪儿 第25关 图文攻略_手机游戏_游戏攻略_
- 天天飞车显示检测异常解决办法 天天飞车攻略心得_手机游戏_游戏攻略_
- 爸爸去哪儿 第26关 图文攻略_手机游戏_游戏攻略_
