浅谈cookie和localStorage那些事


Posted in HTML / CSS onAugust 27, 2019

一、localStorage、cookie、sessionStorage的区别与练习

浅谈cookie和localStorage那些事

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

浅谈cookie和localStorage那些事

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
对CSS3选择器的研究(详解)
Sep 16 HTML / CSS
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
使用CSS实现阅读进度条
Feb 27 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 #HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 #HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 #HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 #HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 #HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 #HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 #HTML / CSS
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
潜说js对象和数组
2011/05/25 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python 获取et和excel的版本号
2009/04/09 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
数据库的约束含义
2012/09/09 面试题
文秘专业自荐信
2013/10/14 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
纪律教育月活动总结
2014/08/26 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
音乐教师求职信范文
2015/03/20 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
PHP命令行与定时任务
2021/04/01 PHP
用php如何解决大文件分片上传问题
2021/07/07 PHP
python库sklearn常用操作
2021/08/23 Python
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技