皮皮网

1.cookieAPI真难用，你造过相关的轮子吗
2.输入一个网页打开二个网页

cookieAPI真难用，你造过相关的轮子吗

       前言

       歌德说过：读一本好书，就是在和高尚的人谈话。同理，读优秀的源码阅读神器免费开源项目的源码，就是在和优秀的大佬交流，是站在巨人的肩膀上学习——今天我们将通过读js-cookie的源码，来学会造一个操作cookie的轮子~

1.准备简单介绍一下cookie

       Cookie是直接存储在浏览器中的一小串数据。它们是HTTP协议的一部分，由RFC规范定义。最常见的用处之一就是身份验证我们可以使用document.cookie属性从浏览器访问cookie。

这个库，是干啥的?不用这个库时?

       cookie的原生API，非常“丑陋”：

修改

       我们可以写入document.cookie。但这不是一个数据属性，它是一个访问器（getter/setter）。对其的赋值操作会被特殊处理。对document.cookie的写入操作只会更新其中提到的cookie，而不会涉及其他cookie。例如，此调用设置了一个名称为user且值为John的源码制作实例cookie：

document.cookie?=?"user=John";?//?只会更新名称为?user?的?cookiedocument.cookie?=?"user=John;?path=/;?expires=Tue,??Jan??::?GMT"

       赋值时传入字符串，并且键值对以=相连，如果多项还要用分号;隔开...

删除

       将过期时间设置为过去，自然就是删除了~

//?删除?cookie（让它立即过期）document.cookie?=?"expires=Thu,??Jan??::?GMT";document.cookie?=?"user=John;?max-age=0";

       但是很明显，这语义化也太差了..

js-cookieAPI

       我们先来了解一下API

//?setCookies.set('name',?'value',?{ ?expires:?7,?path:?''?})//?get?Cookies.get('name')?//?=>?'value'Cookies.get()?//?=>?{ ?name:?'value'?}//?removeCookies.remove('name')

       OK我们大概可以知道是这样子

set(key,?value)get(key)remove(key)

       简洁方便多了，并且一眼就知道这行代码是在干什么~

2.读源码三部曲?

       这段可能有点太细了，如果嫌啰嗦，只想看实现可以直接跳到下面的实现部分~

一?READMEwhy

       一个简单、轻量级的JavaScriptAPI，用于处理cookie适用于所有浏览器?接受任何字符大量的测试?不依赖支持ES模块支持AMD/CommonJSRFC兼容的有用的Wiki?启用自定义编码/解码<字节gzip!

       优点多多呀

表示后文会详细提及~

BasicUsage

       大概就是前面写过的API介绍

二package.json依赖

       确实是很少依赖，并且只有开发依赖，没有生产依赖，很nice~

scripts"scripts":?{ "test":?"grunt?test","format":?"grunt?exec:format","dist":?"rm?-rf?dist/*?&&?rollup?-c","release":?"release-it"},exportsexports":?{ ".":?{ "import":?"./dist/js.cookie.mjs","require":?"./dist/js.cookie.js"},

       看来入口在/dist/js.cookie这点从index.js也能看出

module.exports?=?require('./dist/js.cookie')

       当然，目前是没有dist这个目录的。这需要打包~

.mjs

       另外我们刚才看到了.mjs这个后缀，这我还是第一次见，你呢

       .mjs：表示当前文件用ESM的方式进行加载

       .js：采用CJS的方式加载。

ESM和CJS

       ESM是将javascript程序拆分成多个单独模块，并能按需导入的标准。和webpack，babel不同的是，esm是maskrcnn框架源码javascript的标准功能，在浏览器端和nodejs中都已得到实现。也就是熟悉的import、exportCJS也就是commonJS，也就是module.exports、require。

       更多介绍以及差别不再赘述~

三src进入src，首当其冲的就是api.mjs，这一眼就是关键文件啊?emm..一个init方法，其中包含set和get方法，返回一个Objectremove方法藏在其中~乍一看，代码当然还是能看得懂每行都是在做啥的呀~但是总所周知

       开源项目也是不断迭代出来的~也不是一蹴而就的——若川哥

       okok，我们来一步步"抄"一下源码

3.实现?

       下面为了传参返回值更加清晰用了TS语法~

3.1最简易版本set

       设置一个键值对，要这样

document.cookie?=?`${ key}=${ value};?expires=${ expires};?path=${ path}`

       除了键值对还有后面的属性~可别把它忘记了我们用写一个接口限制一下传入的属性：

interface?Attributes?{ path:?string;?//可访问cookie的路径，默认为根目录domain?:?string;?//可访问?cookie?的域expires?:?string?|?number?|?Date?//?过期时间：UTC时间戳string?||?过期天数[`max-age`]?:number?//ookie?的过期时间距离当前时间的秒数//...}const?TWENTY_FOUR_HOURS?=?e5?//h的毫秒数//源码中是init的时候传入defaultAttributes，这里先暂做模拟const?defaultAttributes:?Attributes?=?{ path:?'/'}function?set(key:?string,?value:?string,?attributes:?Attributes):?string?|?null?{ attributes?=?{ ...defaultAttributes,?...attributes}?//if?(attributes.expires)?{ //如果有过期时间//?如果是数字形式的，就将过期天数转为?UTC?stringif?(typeof?attributes.expires?===?'number')?{ attributes.expires?=?new?Date(Date.now()?+?attributes.expires?*?TWENTY_FOUR_HOURS)attributes.expires?=?attributes.expires.toUTCString()}}//遍历属性键值对并转换为字符串形式const?attrStr?=?Object.entries(attributes).reduce((prevStr,?attrPair)?=>?{ const?[attrKey,?attrValue]?=?attrPairif?(!attrValue)?return?prevStr//将key拼接进去prevStr?+=?`;?${ attrKey}`//?attrValue?有可能为?truthy，所以要排除?true?值的情况if?(attrValue?===?true)?return?prevStr//?排除?attrValue?存在?";"?号的情况prevStr?+=?`=${ attrValue.split(';?')[0]}`return?prevStr},?'')return?document.cookie?=?`${ key}=${ value}${ attrStr}`}get//?删除?cookie（让它立即过期）document.cookie?=?"expires=Thu,??Jan??::?GMT";document.cookie?=?"user=John;?max-age=0";0

       我们知道document.cookie长这个样子，那么就根据对应规则操作其字符串获得键值对将其转化为Object先

//?删除?cookie（让它立即过期）document.cookie?=?"expires=Thu,??Jan??::?GMT";document.cookie?=?"user=John;?max-age=0";1

       要注意的有意思的一个点是，可能value中就有'='这个字符，所以还要特殊处理一下~

       比如他就是"颜文字==_="?(~~应该不会有人真往cookie里面放表情吧hh~~但是value中有'='还是真的有可能滴~?其实一开始我真没想过这个问题，是上传源码视频看了源码才知道的

Record

       接收两个参数——keys、values，使得对象中的key、value必须在keys、values里面。

remove

       remove就简单啦，用set把过期时间设置为过去就好了~

//?删除?cookie（让它立即过期）document.cookie?=?"expires=Thu,??Jan??::?GMT";document.cookie?=?"user=John;?max-age=0";.2接受任何字符

       从技术上讲，cookie的名称和值可以是任何字符。为了保持有效的格式，它们应该使用内建的encodeURIComponent函数对其进行转义~再使用ecodeURIComponent函数对其进行解码。还记得README中写的接收任何字符吗~这就需要我们自己来在里面进行编码、解码的封装~

set//?删除?cookie（让它立即过期）document.cookie?=?"expires=Thu,??Jan??::?GMT";document.cookie?=?"user=John;?max-age=0";3get//?删除?cookie（让它立即过期）document.cookie?=?"expires=Thu,??Jan??::?GMT";document.cookie?=?"user=John;?max-age=0";.3封装编码和解码两个操作

       源码中converter.mjs封装了这两个操作为write和read，并作为defaultConverter导出到api.mjs，最后作为converter传入init——降低了代码的耦合性，为后面的自定义配置做了铺垫~前面编码解码变成了这样：

//?删除?cookie（让它立即过期）document.cookie?=?"expires=Thu,??Jan??::?GMT";document.cookie?=?"user=John;?max-age=0";.4启用自定义编码/解码

       我们是具有内置的encodeURIComponent和decodeURIComponent，但是也并不是必须使用这两个来进行编码和解码，也可以用别的方法——也就是前面README中说的可以自定义编码/解码~除了这两个方法可自定义，其余的属性也可以自定义默认值，并且配置一次后，后续不用每次都传入配置——所以我们需要导出时有对应的两个方法

//?删除?cookie（让它立即过期）document.cookie?=?"expires=Thu,??Jan??::?GMT";document.cookie?=?"user=John;?max-age=0";6

       封装在其中，利用对象合并时有重复属性名的情况是后面的覆盖掉前面的这一特性完成该自定义配置属性以及转换方法的功能。现在的源码开发架构cookie大概是这样的一个对象

//?删除?cookie（让它立即过期）document.cookie?=?"expires=Thu,??Jan??::?GMT";document.cookie?=?"user=John;?max-age=0";.5防止全局污染

       现在的cookie直接在全局上下文下，很危险，谁都能更改，而且还不一定能找到，我们将其设置为局部的，封装到init函数中，调用init传入相应的自定义属性以及自定义转换方法得到一个初始化的cookie对象现在大概就是源码的架构形状了~

//?删除?cookie（让它立即过期）document.cookie?=?"expires=Thu,??Jan??::?GMT";document.cookie?=?"user=John;?max-age=0";.6确保一些属性不会给改变

       用Object.create来生成对象，并用Object.freeze把对象atributes和converter冻结。

//?删除?cookie（让它立即过期）document.cookie?=?"expires=Thu,??Jan??::?GMT";document.cookie?=?"user=John;?max-age=0";9

       Obecj.create的第二个参数

       属性描述符

       现在你就不能修改Cookie的attributes、converter属性了~

4.总结&收获?总结init及其中属性&返回而用init函数生成对象是为了解决全局污染问题，并且更新对象时也是用的init

       现在你再回头看源码是不是就更加清晰了~

扩展

       说到cookie这个在浏览器中存储数据的小东西，就不得不提一下localstorage、sessionStorage

cookie、localstorage、sessionStorage的区别

       Web存储对象localStorage和sessionStorage也允许我们在浏览器上保存键/值对。

       那他们的区别呢

       在页面刷新后（对于sessionStorage）甚至浏览器完全重启（对于localStorage）后，数据仍然保留在浏览器中。默认情况下cookie如果没有设置expires或max-age，在关闭浏览器后就会消失

       与cookie不同，Web存储对象不会随每个请求被发送到服务器，存储在本地的数据可以直接获取。因此，我们可以保存更多数据，减少了客户端和服务器端的交互，节省了网络流量。大多数浏览器都允许保存至少2MB的数据（或更多），并且具有用于配置数据的设置。

       还有一点和cookie不同，服务器无法通过HTTPheader操纵存储对象。一切都是在JavaScript中完成的。

       以及..他们的原生API比cookie的"好看"太多~[doge]

CookiesessionStoragelocalstorage生命周期默认到浏览器关闭，可自定义浏览器关闭除非自行删除或清除缓存，否则一直存在与服务器通信/post/

输入一个网页打开二个网页

       1、最基本的弹出窗口代码

       其实代码非常简单：

       <SCRIPT LANGUAGE="javascript">

       <!--

       window.open (page.html)

       -->

       </SCRIPT>

       因为着是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。

       window.open (page.html) 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。

       这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

       2、经过设置后的弹出窗口

       下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。

       我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

       <SCRIPT LANGUAGE="javascript">

       <!--

       window.open (page.html, newwindow, height=, width=, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no)

       file://写成一行

       -->

       </SCRIPT>

       参数解释：

       <SCRIPT LANGUAGE="javascript"> js脚本开始；

       window.open 弹出新窗口的命令；

       page.html 弹出窗口的文件名；

       newwindow 弹出窗口的名字（不是文件名），非必须，可用空代替；

       height= 窗口高度；

       width= 窗口宽度；

       top=0 窗口距离屏幕上方的象素值；

       left=0 窗口距离屏幕左侧的象素值；

       toolbar=no 是否显示工具栏，yes为显示；

       menubar，scrollbars 表示菜单栏和滚动栏。

       resizable=no 是否允许改变窗口大小，yes为允许；

       location=no 是否显示地址栏，yes为允许；

       status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

       </SCRIPT> js脚本结束

       3、用函数控制弹出窗口

       下面是一个完整的代码。

       <html>

       <head>

       <script LANGUAGE="JavaScript">

       <!--

       function openwin() { window.open ("page.html", "newwindow", "height=, width=, toolbar=

       no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")

       file://写成一行

       }

       file://-->

       </script>

       </head>

       <body onload="openwin()">

       ...任意的页面内容...

       </body>

       </html>

       这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。

       怎么调用呢？

       方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；

       方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；

       方法三：用一个连接调用：

       <a href="#" onclick="openwin()">打开一个窗口</a>

       注意：使用的“#”是虚连接。

       方法四：用一个按钮调用：

       <input type="button" onclick="openwin()" value="打开窗口">

       4、同时弹出2个窗口

       对源代码稍微改动一下：

       <script LANGUAGE="JavaScript">

       <!--

       function openwin()

       { window.open ("page.html", "newwindow", "height=, width=, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")

       file://写成一行

       window.open ("page2.html", "newwindow2", "height=, width=, top=, left=,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")

       file://写成一行

       }

       file://-->

       </script>

       为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。

       注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？

       5、主窗口打开文件1.htm，同时弹出小窗口page.html

       如下代码加入主窗口<head>区：

       <script language="javascript">

       <!--

       function openwin()

       { window.open("page.html","","width=,height=")

       }

       file://-->

       </script>

       加入<body>区：

       <a href="1.htm" onclick="openwin()">open</a>即可。

       6、弹出的窗口之定时关闭控制

       下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它秒后自动关闭是不是更酷了？

       首先，将如下代码加入page.html文件的<head>区：

       <script language="JavaScript">

       function closeit()

       { setTimeout("self.close()",) file://毫秒}

       </script>

       然后，再用<body onload="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，秒钟后就自行关闭该窗口。)

       7、在弹出窗口中加上一个关闭按钮

       <FORM>

       <INPUT TYPE=BUTTON VALUE=关闭 onClick=window.close()>

       </FORM>

       呵呵，现在更加完美了！

       8、内包含的弹出窗口-一个页面两个窗口

       上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。

       通过下面的例子，你可以在一个页面内完成上面的效果。

       <html>

       <head>

       <SCRIPT LANGUAGE="JavaScript">

       function openwin()

       { OpenWindow=window.open("", "newwin", "height=, width=,toolbar=no,scrollbars="+scroll+",menubar=no");

       file://写成一行

       OpenWindow.document.write("<TITLE>例子</TITLE>")

       OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")

       OpenWindow.document.write("<h1>Hello!</h1>")

       OpenWindow.document.write("New window opened!")

       OpenWindow.document.write("</BODY>")

       OpenWindow.document.write("</HTML>")

       OpenWindow.document.close()}

       </SCRIPT>

       </head>

       <body>

       <a href="#" onclick="openwin()">打开一个窗口</a>

       <input type="button" onclick="openwin()" value="打开窗口">

       </body>

       </html>

       看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。

       9、终极应用--弹出的窗口之Cookie控制

       回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(有解决的办法吗？Yes! ;-) Follow me.

       我们使用cookie来控制一下就可以了。

       首先，将如下代码加入主页面HTML的<HEAD>区：

       <script>

       function openwin()

       { window.open("page.html","","width=,height=")}

       function get_cookie(Name)

       { var search = Name + "="

       var returnvalue = "";

       if (document.cookie.length > 0) {

       offset = document.cookie.indexOf(search)

       if (offset != -1) {

       offset += search.length

       end = document.cookie.indexOf(";", offset);

       if (end == -1)

       end = document.cookie.length;

       returnvalue=unescape(document.cookie.substring(offset,end))

       }

       }

       return returnvalue;

       }

       function loadpopup(){

       if (get_cookie(popped)==){

       openwin()

       document.cookie="popped=yes"

       }

       }

       </script>

       然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！

       写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希望对正在制作网页的朋友有所帮助俺就非常欣慰了。

       需要注意的是，JS脚本中的的大小写最好前后保持一致