一、converter.mjs 文件
作用：中文/二进制 url编码/解码
/* eslint-disable no-var */
// 模块功能：url编码/解码
// 1-JS全局函数
/**
函数名称：encodeURIComponent(uri)
函数功能：把字符串作为 URI 组件进行编码
参数：uri 必须，一个字符串，含有 URI 组件或其他要编码的文本
返回值：URI字符串
说明：该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( )
*/
/**
函数名称：decodeURIComponent(uri)
函数功能：对 encodeURIComponent() 函数编码的 URI 进行解码
参数：uri 必需，一个字符串，含有编码 URI 组件或其他要解码的文本
说明：编码特点 %[\dA-F]{2}
*/
// 2-url构成
/**
网页地址实例: http://www.runoob.com/html/html-tutorial.html
语法规则: scheme://host.domain:port/path/filename
scheme：因特网服务的类型。最常见的类型是 http
host：域主机（http 的默认主机是 www）
domain：因特网域名，比如 runoob.com
:port：主机上的端口号（http 的默认端口号是 80）
path：服务器上的路径（如果省略，则文档必须位于网站的根目录中）
filename：文档/资源的名称
*/
export default {
/**
函数名称：converter.read(value)
函数功能：uri解码
参数：value 必需，要取得的Cookie名称
说明：
*/
read: function (value) {
if (value[0] === '"') {
value = value.slice(1, -1)
}
return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent)
},
/**
函数名称：converter.write(value)
函数功能：uri编码
参数：value 必需
说明：
*/
write: function (value) {
return encodeURIComponent(value).replace(
/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
decodeURIComponent
)
}
}
/* eslint-enable no-var */
二、assign.mjs 文件
作用：分割 Cookie 键值对字符串
/* eslint-disable no-var */
/**
函数名称：function (target)
函数功能：Cookie字符串分割
参数：target 必需，要分割的Cookie名称
返回值：target[key]
说明：浅层遍历args，并分别返回各参数
*/
export default function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i]
for (var key in source) {
target[key] = source[key]
}
}
return target
}
/* eslint-enable no-var */
三、api.mjs 文件
作用：定义 cookie 功能函数
/* eslint-disable no-var */
import assign from './assign.mjs'
import defaultConverter from './converter.mjs'
// 1-知识点Cookie -4B
/**
属性：Cookie 是不可以跨域名
name:
value:
Expires: 有效期，单位s;
domain: 域名，解决跨域问题。Cookie是不可以跨域名的;
path: 允许访问Cookie的路径，默认情况下，cookie 属于当前页面。
数据存储格式：Cookie 以名/值对形式存储 *字符串*
示例：username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/
存储/获取：document.cookie
返回格式: 字符串
cookie总结：
cookie 在过期时间之前一直有效，即使窗口或浏览器关闭
浏览器也会在每次请求的时候 *主动组织* 所有域下的cookie到请求头 cookie 中，发送给服务器端
浏览器会 *主动存储* 接收到的 set-cookie 头信息的值
可以设置 http-only 属性为 true来禁止客户端代码（js）修改该值
可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
同域下个数有限制，最好不要超过50个(不同浏览器有所不同)
单个cookie内容大小有限制，最好不要超过4000字节(不同浏览器有所不同)
应用场景：
保存用户登录状态；
跟踪用户行为。如：购物车
*/
// 2-知识点Storage -5MB
/**
localStorage：*永久存储* 在本地硬盘的数据中，生命周期是永久（除非手动删除）
属性：
key:
value:
数据存储格式：*字符串* （auto）
<script>
localStorage.setItem('name', '张三')
localStorage.age = 18
localStorage['sex'] = '男'
localStorage.obj = JSON.stringify({ name: '小明' })
console.log(localStorage.name) //张三
console.log(localStorage.getItem('age')); //18
console.log(localStorage['sex']) //男
console.log(JSON.parse(localStorage.obj)) //{name: "小明"}
localStorage.removeItem('age')
console.log(localStorage.age); //undefined
console.log(localStorage.key(0)); //obj
console.log(localStorage.key(1)); //name
console.log(localStorage.key(2)); //sex
// window.localStorage.clear()
// console.log(localStorage); //Storage {length: 0}
</script>
sessionStorage：*临时存储* 在浏览器中，生命周期为浏览器页面打开时间（页面关闭时数据丢失）
属性：
key:
value:
数据存储格式：*字符串* （auto）
两者通用属性和方法：
setItem(keyname，value) 存储键值对，如果键名相同，则更新值
getItem(keyname) 根据键名查找对应的值
key(n) 返回第n个键的名称
length 返回键键值对的数量（存储了几个不同的数据）
removeitem(keyname) 根据键名删除对应的键值对
clear() 清除所有键
*/
// 2-init 方法 初始化
function init (converter, defaultAttributes) {
/**
函数名称：set (name, value, attributes)
函数功能：保存Cookie
参数：attributes 可选项，格式为对象
返回值：
说明：
*/
function set (name, value, attributes) {
// 没有document 直接return 返回什么也不执行
if (typeof document === 'undefined') {
return
}
// 把传入的值和默认值合并到一起，如果key一样，传入的值直接替换默认值
attributes = assign({
}, defaultAttributes, attributes)
// 如果传入expires为天数，时间则直接转换为毫秒
if (typeof attributes.expires === 'number') {
attributes.expires = new Date(Date.now() + attributes.expires * 864e5)
}
// 把日期转为字符串设置cookie过期时间
if (attributes.expires) {
attributes.expires = attributes.expires.toUTCString()
}
// 对汉字编码进行处理
name = encodeURIComponent(name)
.replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)
.replace(/[()]/g, escape)
var stringifiedAttributes = ''
// 遍历传入的对象并拼接属性值
for (var attributeName in attributes) {
// 为空字符串或者null undefined退出本次循环
if (!attributes[attributeName]) {
continue
}
stringifiedAttributes += '; ' + attributeName
// 传入boolean值退出当前循环
if (attributes[attributeName] === true) {
continue
}
// Considers RFC 6265 section 5.2:
// ...
// 3. If the remaining unparsed-attributes contains a %x3B (";")
// character:
// Consume the characters of the unparsed-attributes up to,
// not including, the first %x3B (";") character.
// ...
stringifiedAttributes += '=' + attributes[attributeName].split(';')[0]
}
// 写入的时候使用converter进行encode编码
return (document.cookie =
name + '=' + converter.write(value, name) + stringifiedAttributes)
}
// get 方法 读取cookie
function get (name) {
if (typeof document === 'undefined' || (arguments.length && !name)) {
return
}
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all.
var cookies = document.cookie ? document.cookie.split('; ') : []
var jar = {
}
for (var i = 0; i < cookies.length; i++) {
var parts = cookies[i].split('=')
var value = parts.slice(1).join('=')
try {
var found = decodeURIComponent(parts[0])
jar[found] = converter.read(value, found)
if (name === found) {
break
}
} catch (e) {
}
}
return name ? jar[name] : jar
}
// 返回 新创建的对象
return Object.create(
{
set: set, // 设置cookie方法
get: get, // 读取cookie方法
remove: function (name, attributes) {
// 删除cookie方法，其实内部调用了set方法，并把expirse设置为过去时间来删除
set(name, '',
assign({
}, attributes, {
expires: -1
})
)
},
// 修改设置cookie的一些常用属性类似于path,domain,expires, 重新返回一个实例化的对象，
// 可以设置一个全局的cookie共享设置的一些属性值
withAttributes: function (attributes) {
return init(this.converter, assign({
}, this.attributes, attributes))
},
// 和上个方法作用差不多，可以对converter，进行一些扩展
withConverter: function (converter) {
return init(assign({
}, this.converter, converter), this.attributes)
}
},
// Object.create的可选值，新增一些对象上的属性,
// Object.freeze冻结对象不能删除和修改另外不能修改该对象已有属性的可枚举性、可配置性、可写性，
// 以及不能修改已有属性的值
{
attributes: {
value: Object.freeze(defaultAttributes) },
converter: {
value: Object.freeze(converter) }
}
)
}
export default init(defaultConverter, {
path: '/' })
/* eslint-enable no-var */