摘要：它的大小限制为左右，是网景公司的前雇员在年月的发明。字符串转义通过来设置的有效期。和的用法和属性允许在浏览器中存储对的数据。用于临时保存同一窗口或标签页的数据，在关闭窗口或标签页之后将会删除这些数据。是浏览器关闭后就立即清除。
一、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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109990.html
摘要：假设有两个域名域名域名域名有分级的概念，也就是说域名与域名都是的子域名，又是的子域名在域名所使用的服务中，可以设置域名在服务端设置的时候，设置为或没有区别，注意前面的点，即只要是为显式的声明，前面带不带点没有区别。 1 Cookie简介 Cookie是由W3C组织提出，最早由NetScape社区发展的一种机制。Cookie是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某...
摘要：假设有两个域名域名域名域名有分级的概念，也就是说域名与域名都是的子域名，又是的子域名在域名所使用的服务中，可以设置域名在服务端设置的时候，设置为或没有区别，注意前面的点，即只要是为显式的声明，前面带不带点没有区别。 1 Cookie简介 Cookie是由W3C组织提出，最早由NetScape社区发展的一种机制。Cookie是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某...
摘要：如图图顾名思义，，是级别的存储。如笔者写的一篇浅析文章聊一聊百度移动端首页前端速度那些事儿读者们可以尝试使用。 欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/frontenddriver 在web开发越来越复杂的今天，前端拥有的能力也越来越多。其中最重要的一项莫过于web存储。...
阅读 630·2021-11-24 09:39
阅读 2952·2021-11-23 10:06
阅读 957·2021-10-08 10:05
阅读 733·2019-08-30 10:49
阅读 1682·2019-08-29 14:08
阅读 1278·2019-08-29 12:48
阅读 3303·2019-08-26 14:04
阅读 3585·2019-08-26 13:50
