cookie与webStorage

发表于 分类于

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 『如何记录客户端的用户信息』:

1. 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
2. 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

一个cookie是以键值对的形式存储的，如：

1
name = xxf

cookie的不足

  • cookie的大小限制在4KB；
  • cookie会伴随http请求一起被发送，会浪费网络带宽
  • cookie的正确操作比较困难

session

所谓session，指的就是用户在浏览某个网站时，从进入网站到关闭浏览器所经过的这段时间，也就是用户浏览这个网站所花费的时间。

Web Storage

Web Storage 是HTML5新增的一种用来在客户端本地进行数据保存的功能。

分为sessionStorage和localStorage两种，其中sessionStorage保存期限（即有效使用期限）即一次session的时间；而localStorage则会直接将数据保存到客户端本地的硬件设备（通常是硬盘）中，浏览器关闭后也不会销毁，下次打开浏览器时依然能被使用！

  • sessionStorage为临时保存
  • localStorage为永久保存（没有默认保存期限？）
  • Web Storage 是按浏览器来保存数据的，即不同浏览器之间保存的Web Storage不能互用！
  • sessionStorage和localStorage是window对象的属性，不需要声明定义！

api操作

  1. 保存数据：使用setItem()方法来保存一对数据，如：
1
2
// 第一个参数为键名，第二个参数为键值
sessionStorage.setItem("name", "xxf");

也可以直接对sessionStorage对象设定自定义属性来保存数据：

1
sessionStorage.name = "xxf";
  1. 读取数据：使用getItem()方法来读取某键名对应的数据：
1
console.log(sessionStorage.getItem("name")); // xxf

同理，也可以直接访问对象属性来获取数据：

1
console.log(sessionStorage.name); // xxf
  1. 删除单个数据：使用removeItem()方法删除某一数据：
1
sessionStorage.removeItem("name");
  1. 删除所有数据：使用clear()方法删除所有的数据：
1
sessionStorage.clear();
  1. 按照索引获取对应数据的键名：使用方法key()：

参考文档

  1. HTML5 Web 存储 | 菜鸟教程