博客

首先来了解下HTTP协议

• http：超文本传输协议，无状态，同一个客户端的这次请求和上次请求没有对应关系。
• https：超文本传输安全协议，HTTP + SSL / TLS，也就是在 HTTP 上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过 TLS 进行加密，所以传输的数据都是加密后的数据。

对

http

服务器来说，它并不知道这两个请求来自同一个客户端，为了解决这个问题，Web程序引入了

cookie

机制来维护状态。

1.cookie

1.1 cookie是什么


cookie

是浏览器提供的一种机制，可以由JavaScript对其进行操作(设置、读取、删除)，是一种会话跟踪技术，是存储于访问者计算机中的一小块数据


会话

：用户进入网站，开始浏览信息到关闭浏览器的过程，就称之为是一次会话；


会话跟踪技术

：浏览器和服务器之间在进行多次请求间共享数据的过程，就称为会话跟踪技术；

1.2 cookie的特性

• cookie可以实现跨页面全局变量
• cookie可以跨越同域名下的多个网页，但不能跨域使用
• cookie会随着HTTP请求发送给服务器
• cookie会存储于访问者的计算机中
• 同一个网站中所有页面共享一套cookie
• 可以设置有效期限
• 存储空间为4KB左右

1.3 cookie应用场景

• 会话状态管理（如用户登录状态、购物车等）
• 个性化设置（保存用户设置的样式等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

1.4 操作cookie

每个cookie都是一个键/值对格式的字符串(key=value)

设置cookie

：

document.cookie="name1=qxj";
document.cookie="name2=xm";

如果要改变一个

cookie

的值，只能重新赋值

设置有效期（expires）

：

var d=new Date();
d.setDate(d.getDate()+3); //按天数设置
document.cookie="user3=xd; expires="+d;

读取cookie

：

var cookies = document.cookie;

只能够一次获取所有的

cookie

值，使用时必须自己解析这个字符串，来获取指定的

cookie

值

删除cookie

：cookie过期会自动消失

要手动删除一个cookie，可将其有效期设为一个过去的时间

var d=new Date();
d.setDate(d.getDate()-1);
document.cookie="user1=xh; expires="+d;

2.HTML5本地存储（WebStorage）

H5本地存储有

localStorage

与

sessionStorage

两种

优点：

• 更大的存储空间，有5MB左右
• 不会随HTTP请求发送给服务器
• 有方便的API操作
• 移动端普及高

2.1 localStorage详解


localStorage

为永久性保存数据，不会随着浏览器的关闭而消失。

按域名进行存储，可以在同域名下跨页面访问，不会和其他域名冲突。

按键值对存储：

key/value


在Angular项目中往往需要建一个 LocalStorageService 来进行本地存储，以此为例，讲解localStorage的用法：

// localstorage.service.ts
import {Injectable} from '@angular/core'

@Injectable()
export class LocalStorage {

  public static localStorage: any = window.localStorage

  constructor() {
    if (!LocalStorage.localStorage) {
      throw new Error('您的浏览器不支持本地存储（LocalStorage）！')
    }
  }

	// localStorage只支持string类型的存储
  public static set(key: string, value: any): void {
   	// 如果key已经存在，则覆盖key对应的value
    // 如果不存在则添加key与value
    LocalStorage.localStorage.setItem(key, JSON.stringify(value))
  }

  public static get(key: string): string {
	// localStorage.getItem(key) 获取key对应的value，如果key不存在则返回null
    let value = LocalStorage.localStorage.getItem(key)
    try {
      value = JSON.parse(value)
    } catch (e) {
    }
    return value
  }

  public static remove(key: string): any {
  	// 删除某个键值对
    LocalStorage.localStorage.removeItem(key)
  }

  public static clear(): any {
  	// 将同域名下的所有数据都清空
    LocalStorage.localStorage.clear()
  }

}

2.2 sessionStorage详解


sessionStorage

各种操作与

localStorage

一样

2.3 localStorage与sessionStorage区别

我们经常用到这两种存储方式，因此需要清楚了解它们之间的相同点和区别。

相同点

：

1. 
localStorage

   与
   
sessionStorage

   的API调用方法相同；
2. 不同浏览器无法共享
   
localStorage

   或
   
sessionStorage

   中的信息；

不同点

：

1. 访问权限：
   
   相同浏览器的不同页面可以共享相同的
   
localStorage

   （前提是页面属于相同域名和端口）；
   
   相同浏览器的不同页面无法共享
   
sessionStorage

   的信息，只局限在当前的标签页；

2. 数据的生命周期：
   
   
localStorage

   为永久性保存数据，不会随着浏览器的关闭而消失。按域名进行存储，可以在同域名下跨页面访问，不会和其他域名冲突；
   
   
sessionStorage

   为临时性保存数据，当页面关闭就会消失；

3.cookie、localStorage 与 sessionStorage的比较