浏览器本地存储cookie、localStorage 与 sessionStorage

  • Post author:
  • Post category:其他


首先来了解下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的比较

特性 cookie localStorage sessionStorage
由谁初始化 客户端或服务器,服务器可以使用Set-Cookie请求头。 客户端 客户端
数据的生命周期 一般由服务器生成,可设置失效时间,如果在浏览器生成,默认是关闭浏览器之后失效 永久保存,可清除 仅在当前会话有效,关闭页面后清除
存放数据大小 4KB 5MB 5MB
与服务器通信 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 仅在客户端保存 仅在客户端保存
用途 一般由服务器生成,用于标识用户身份 用于浏览器缓存数据 用于浏览器缓存数据
访问权限 任意窗口 任意窗口 当前页面窗口



版权声明:本文为a1056244734原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。