个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
29
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章JavaScript本地储存:localStorage、sessionStorage、cookie的使用由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
javaScript有三种数据存储方式，分别是:
1. sessionStorage 。
|
1
2
3
4
5
6
7
8
9
10
11
|
<script>
// 添加数据
window.sessionStorage.setItem(
"name"
,
"李四"
)
window.sessionStorage.setItem(
"age"
,18)
// 获取数据
console.log(window.sessionStorage.getItem(
"name"
))
// 李四
// 清除某个数据
window.sessionStorage.removeItem(
"gender"
)
// 清空所有数据
window.sessionStorage.clear()
</script>
|
2. localStorage 。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<script>
// 添加数据
window.localStorage.setItem(
"name"
,
"张三"
)
window.localStorage.setItem(
"age"
,20)
window.localStorage.setItem(
"gender"
,
"男"
)
// 获取数据
console.log(window.localStorage.getItem(
"name"
))
// 张三
// 清除某个数据
window.localStorage.removeItem(
"gender"
)
// 清空所有数据
window.localStorage.clear()
</script>
|
3. cookier 。
简介 Cookie 是一些数据, 存储于你电脑上的文本文件中，用于存储 web 页面的用户信息 Cookie 数据是以键值对的形式存在的，每个键值对都有过期时间。如果不设置时间，浏览器关闭，cookie就会消失，当然用户也可以手动清除cookie Cookie每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 Cookie内存大小受限，一般每个域名下是4K左右，每个域名大概能存储50个键值对 。
基本操作 通过访问document.cookie可以对cookie进行创建，修改与获取。 默认情况下，cookie 在浏览器关闭时删除，你还可以为 cookie的某个键值对 添加一个过期时间 如果设置新的cookie时，某个key已经存在，则会更新这个key对应的值，否则他们会同时存在cookie中 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<script>
// 设置cookie
document.cookie =
"username=orochiz"
document.cookie =
"age=20"
// 读取cookie
var
msg = document.cookie
console.log(msg)
// username=orochiz; age=20
// 添加过期时间（单位：天）
var
d =
new
Date()
// 当前时间 2019-9-25
var
days = 3
// 3天
d.setDate(d.getDate() + days)
document.cookie =
"username=orochiz;"
+
"expires="
+d
// 删除cookie （给某个键值对设置过期的时间）
d.setDate(d.getDate() - 1)
console.log(document.cookie)
</script>
|
总结 。
相同点：都保存在浏览器端，可以下图位置查看储存的信息 。
不同点:
①传递方式不同 。
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递.
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存.
②数据大小不同 。
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识.
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大.
③数据有效期不同 。
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持； 。
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据； 。
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭.
④作用域不同 。
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面； 。
localStorage 在所有同源窗口中都是共享的； 。
cookie也是在所有同源窗口中都是共享的.
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者.
Web Storage 的 api 接口使用更方便.
到此这篇关于JavaScript本地储存:localStorage、sessionStorage、cookie的使用的文章就介绍到这了,更多相关JavaScript本地储存内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。
原文链接：https://blog.csdn.net/qq_41929578/article/details/109008564 。
最后此篇关于JavaScript本地储存:localStorage、sessionStorage、cookie的使用的文章就讲到这里了,如果你想了解更多关于JavaScript本地储存:localStorage、sessionStorage、cookie的使用的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
29
4
0
我是一名优秀的程序员,十分优秀！