浏览器存储的三种方式------Cookie、localStorage和SessionStorage

0x00 写在前面

  这是不得不写的一篇。

  当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

  • 当用户访问 web 页面时,用户名可以记录在 cookie 中。
  • 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

  Cookie 以名/值对形式存储,
当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

1
username=John Doe
  1. 创建Cookie

    1
    2
    3
    document.cookie="username=John Doe";
    document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";//为Cookie创建一个过期时间
    document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";//使用path参数告诉浏览器Cookie的路径
  2. 读取Cookie

    1
    var x = document.cookie;//以字符串的方式返回所有的cookie
  3. 修改Cookie

    1
    document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";//类似于创建Cookie,旧的Cookie将会被覆盖。
  4. 删除Cookie

  设置express参数为以前的时间。

1
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

0x02 localStorage

  localStorage是HTML5中新加入的特性,用来作为本地存储的,解决了cookie存储空间不足的问题。localStorage 类似于sessionStorage。区别在于:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储,当页面被关闭时,数据存储在sessionStorage 会被清除 。

  localStorage的使用:

  1. 清空localStorage

    1
    localStorage.clear()
  2. 存储数据

    1
    2
    localStorage.setItem("name","Mark")
    localStorage.name = "Mark";
  3. 读取数据

    1
    2
    3
    4
    localStorage.getItem("Mark")//读取保存在localStorage对象里名为name的变量的值
    localStorage.name //"Mark"
    localStorage.valueOf()//读取存储在localStorage上的所有数据
    localStorage.key(0) // 读取第一条数据的变量名(键值)
  4. 删除某个变量

    1
    localStorage.removeItem("name"); //undefined
  5. 检查localStorage里是否保存某个变量

    1
    2
    localStorage.hasOwnProperty('name') // true
    localStorage.hasOwnProperty('sex') // false
  6. 将数组转为本地字符串

    1
    2
    3
    4
    5
    var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
    localStorage.arr = arr //["aa","bb","cc"]
    localStorage.arr.toLocaleString(); // "aa,bb,cc"
  7. 将JSON存储到localStorage里

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var students = {
    xiaomin: {
    name: "xiaoming",
    grade: 1
    },
    teemo: {
    name: "teemo",
    grade: 3
    }
    }
    students = JSON.stringify(students); //将JSON转为字符串存到变量里
    console.log(students);
    localStorage.setItem("students",students);//将变量存到localStorage里
    var newStudents = localStorage.getItem("students");
    newStudents = JSON.parse(students); //转为JSON
    console.log(newStudents); // 打印出原先对象
0x03 SessionStorage

  sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。

  sessionStorage的使用:

  1. 存储数据

    1
    2
    sessionStorage.setItem('testKey','这是一个测试的value值');//采用setItem()方法存储
    sessionStorage['testKey'] = '这是一个测试的value值';//通过属性方式存储
  2. 读取数据

    1
    2
    sessionStorage.getItem('testKey'); //通过getItem()方法取值、
    sessionStorage['testKey']; // 通过属性方式取值
  3. 存储Json对象

  sessionStorage也可存储Json对象:存储时,通过JSON.stringify()将对象转换为文本格式;读取时,通过JSON.parse()将文本转换回对象。

1
2
3
4
5
6
7
8
9
10
11
12
var userEntity = {
name: 'tom',
age: 22
};
// 存储值:将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
// 取值时:把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom
0x04 三者比较
特性 localstorage SessionStorage Cookie
存储空间 5M左右 5M左右 4k,不能超过20个
生命周期 永久 当前会话 在设置的过期时间之前一直有效
与服务器通信 仅在浏览器中保存,不参与和服务器的通话 仅在浏览器中保存,不参与和服务器的通话 携带在HTTP头中,使用过多会导致性能的问题
应用场景 常用于长期登录(判断用户是否已登录) 敏感账号的一次性登录 1.判断用户是否登陆过网站,以便下次登录时能够实现自动登录(记住密码);2.保存上次登录的时间等信息;3.保存上次查看的页面;4.浏览计数
作用域 不同浏览器无法共享,相同浏览器的不同页面之间可以共享localStorage(页面属于相同域名和端口) 不同浏览器无法共享,不同页面或标签页间无法共享。(当一个标签页包含多个iframe标签且属于同源页面,可以共享) Cookie的作用域为当前设置的域名及其子域名
接口 可以接受原生接口,也可以封装来对Object和Array有更好支持 可以接受原生接口,也可以封装来对Object和Array有更好支持 原生的Cookie接口不友好,需要自己封装setCookie,getCookie

  这三者的共同点是:都是保存在浏览器端,且同源的。

Miss Me wechat
light