本地化存储

欢迎关注掘金 https://juejin.cn/user/2551305355400797

一、cookie

为什么有cookie?

http 上下文无关，无状态协议
set-cookie 服务器设置,前端无法设置
现象：
登录百度，但是百度知道，百度贴吧都顺便登录：Application下Domain决定的
cookie性质：
1、cookie不可跨域
2、cookie存储在浏览器里面，同一个浏览器下的不同页面能互相访问；不同浏览器同一个域名下不能访问
3、cookie有数量与大小的限制
1、数量在50个左右
2、大小在4kb左右
4、cookie的存储时间非常灵活
5、cookie不光可以服务器设置，客户端（前端）也可以设置

前端设置cookie：document.cookie
格式：key:value

document.cookie = 'name=kaivon';
document.cookie = 'name=kaivon; age=18';//document.cookie只能设置一次cookie，这次设置是错的

cookie的属性
1、name cookie的名字，唯一性
2、value cookie的值
3、domain 设置cookie在哪个域下是有效的
4、path cookie的路径

//cookie属性：只能在规定的url下使用
document.cookie = 'color=red; domain=127.0.0.2; path=/docs';//路径随意填
访问怎么访问呢？
把路径改成http://127.0.0.1:5500/docs就有color属性了

5、expires cookie的过期时间 时间点。如果不设置，默认浏览器关闭时候删除(expires:session)
（会话期cookie）
要求的日期格式GMT

console.log(new Date());
document.cookie = 'margin=20; expires=' + new Date(2008, 1, 1);//2月1号，月份从0开始
因为2008已经过去，导致margin过期，消失
注意：expires取得是客户端电脑的时间

6、max-age cookie的有效期 秒为单位的时间段
-1（临时cookies） 0（马上要挂了） 正数（有效）

//document.cookie='padding=30; max-age=1';1s over
document.cookie = 'padding=30; max-age=5';

之前是写，现在我想查看一下cookies

setTimeout(function () {
  console.log(document.cookie);
}, 4000);

7、HttpOnly 有这个标记的cookie，前端是无法获取的
8、Secure 设置cookie只能有过https协议传输
9、SameSite 设置cookie在跨域请求的时候不能被发送

二、localstorage

H5提供了Web Storage（和cookie一样，不能跨域）
**5Mb **
与http无关
保存用户偏好设置，表单历史输入，购物车都是localStorage
web strorage提供了两个对象：
**localStorage不会过期 **
sessionStorage会过期（会话）

console.dir(Storage);
console.log(localStorage, sessionStorage);//继承Storage上的属性和方法

** 1、length 本地存储数据的数量**
** 2、key() 通过索引找到存储的数据**
** 3、getItem() 通过键名取到本地存储的数据**
** 4、setItem() 设置一个本地存储数据**
** 5、removeItem() 删除一个本地存储数据**
** 6、clear() 清空本地存储数据**

console.log(localStorage.length);

localStorage.setItem('name', 'kaivon');
localStorage.setItem('age', '18');
//存储对象
var color = ["red", "green"];   //"red", "green"
var color = { "c1": "red", "c2": "green" }  //[object Object]
localStorage.setItem('color', JSON.stringify(color));
console.log(JSON.parse(localStorage.getItem('color')));

localStorage.removeItem('color');//删除属性
//localStorage.clear();完全清空

删除localStroage的其他方法：浏览器无痕模式

三、Restful API

<ul>
  {dede:arclist typeid="1" row="6"}
  <li>[field:title function="cn_substr(@me, 63)" /]</li>
  {/dede:arclist}
</ul>

dede cms

Restful API是一种互联网软件架构的设计规范、设计指南、设计风格、设计原则

1、API Application Programming Interface 应用程序接口（接口）
**2、Rest Resource Representational State Transfer **
apache
（1）Resource
资源
URI:统一资源标识符。是一个字符串。用来标识互联网资源的名称
URL:统一资源定位符。它是一种具体的URI
（2）Representational
表现层
文本 text\html\xml\json\二进制
（3）State Transfer
状态转化

Restful API具体设计规范

1、协议
** HTTPS**
2、域名
** **https://api.kaivon.com

** **https://www.kaivon.com/api/

3、版本
** **https://api.kaivon.com/v1

4、路径
** **https://api.kaivon.com/v1/blogs

** 5、方法**
** 1、GET 获取资源**
** GET https://api.kaivon.com/v1/blogs 获取所有的文章**
** GET https://api.kaivon.com/v1/blogs/id 获取到某一篇文章**
** 2、POST 添加资源**
** POST https://api.kaivon.com/v1/blogs 增加一篇文章**
** 3、PUT 修改资源（客户端需要提供改变后的完整资源）**
** POST https://api.kaivon.com/v1/blogs/id 修改某一篇文章**
** 4、PATCH 更新资源（客户端需要提供改变的属性）**
** PATCH https://api.kaivon.com/v1/blogs/id 更新某一篇文章**
** 5、DELETE 删除资源**
** DELETE https://api.kaivon.com/v1/blogs/id 删除某一篇文章**
** 6、数据过滤**
** 1、?limit=10 指定返回数据的数量**
** GET **https://api.kaivon.com/v1/blogs?limit=10

** 2、?offset=10 指定一个偏移量**
** GET **https://api.kaivon.com/v1/blogs?offset=10

** 3、?page=2&per_page=10 指定第几页，以及每页的数量**
** GET **https://api.kaivon.com/v1/blogs?offset=10

** 4、?sortby=time&order=arc 指定返回结果按照哪个属性排序，以及排序的方式**
** GET **https://api.kaivon.com/v1/blogs?sortby=time&order=arc

** 7、状态码**
** 8、返回结果**
** 1、GET 资源对象列表（数组），如果取的是一条数据，那返回一个对象**
** 2、POST 返回添加后的资源对象，以及有可能会加上是否成功**
** 3、PUT 返回修改后的资源对象，以及有可能会加上是否成功**
** 4、PATCH 返回更新后的资源对象，以及有可能会加上是否成功**
** 5、DELETE 返回空，以及有可能会加上是否成功**
** 9、返回的数据格式**
** 尽量使用JSON，避免使用XML**

总结

1、看URL就知道要什么
2、看HTTP method就知道干什么
3、看HTTP stuts code就知道结果如何