Cookie和WebStorage

最新推荐文章于 2023-09-05 10:30:24 发布

B~~

最新推荐文章于 2023-09-05 10:30:24 发布

阅读量199

点赞数

分类专栏： cookie session 文章标签： cookie session

本文链接：https://blog.csdn.net/Q111900/article/details/108538968

版权

cookie 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

session

1 篇文章 0 订阅

订阅专栏

Cookie和WebStorage

(一）cookie

cookie指的是服务器发送到用户浏览器并保存到本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于被告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。cookie使基于无状态的http协议记录稳定的状态信息成为了可能。

cookie作用：

（1）会话状态管理（如用户登陆状态，购物车，或其他需要记录的信息）

（2）个性化设置（如用户自定义设置、主题等）

（3）浏览器行为跟踪（如跟踪分析用户行为等）

cookie特性：

（1）cookie必须运行在服务器的环境下(开启服务器)

（2）cookie的容量: 5kb

（3）cookie存储的数据类型:数字，字符串

（4）cookie存放以域名形式区分的。

（5）一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，cookie能存储的条目数为:50条。

（6）如果想长时间存放- -个cookie，同时需要设置一个过期时间

（7）Cookie默认是临时存储的，当浏览器关闭时，自动销毁

cookie缺点

（1）cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能;

（2）cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的;

（3）cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除;

（4）cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时最好事先经过加密处理。

cookie生存期

（1) 在默认情况下，cookie是临时存在的。在-个浏览器窗口打开时，可以设置cookie, 只要该浏览器窗口没有关闭，cookie就- 直有效，而一旦浏览器窗口关闭后，cookie也就随之消失。如果想要cookie在浏览器窗口之后还能继续使用，就需要为cookie设置一个生存期。所谓生存期也就是cookie的终止日期，在这个终止日期到达之前，浏览器都可以读取该cookie. - -旦终止日期到达之后，该cookie将会从cookie文件中删除。

//设置cookie过期时间
var date = new Date()
date.setDate(13)
document.cookie = "time = 11;expires"+date.toString()

创建cookie

var user = "abc"
document.cookie = "user = " + user
document.cookie = "age = 5"
var obj = {
  a: 1,
  b: 2
}
document.cookie = "obj=" + JSON.stringify(obj)

(二）WebStorage

HTML5的Web Storage可以让Web页面在客户端浏览器中以键值对的形式在本地存储数据。这些数据可以是临时的(浏览器一关就自动删除 )，或者是长期存在的(无论多少天之后打开网站,仍然可以访问这些数据)

WebStorage分类

●localStorage:本地存储,用于持久化的本地存储,除非主动删除数据，否则数据是永远不会过期的;

●sessionStorage :会话存储,用于本地存储一个会话( session)中的数据,这些数据当在关闭浏览器后数据也随之销毁。

WebStorage创建清除

//setItem存储value
sessionStorage.setItem("user", "abc")
localStorage.setItem("age", "13")
// getItem获取value
console.log(sessionStorage.getItem("user"));     
console.log(localStorage.getItem("age"));
//removeItem删除key
sessionStorage.removeItem("user")
localStorage.removeItem("age")
//clear清除所有的key/value
sessionStorage.clear()
localStorage.clear()