JavaScript本地储存:localStorage、sessionStorage、cookie的使用


Posted in Javascript onOctober 13, 2020

javaScript有三种数据存储方式,分别是:

  • sessionStorage
  • localStorage
  • cookier

1. sessionStorage

  • sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除;
  • setItem(key,value) 设置数据
  • getItem(key) 获取数据
  • removeItem(key) 移除数据
  • clear() 清除所有值
<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

  • localStorage 是 HTML5 标准中新加入的技术,用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除;
  • localStorage和sessionStorage最大一般为5MB,仅在客户端(即浏览器)中保存,不参与和服务器的通信;
  • setItem(key,value) 设置数据
  • getItem(key) 获取数据
  • removeItem(key) 移除数据
  • clear() 清除所有值
<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中

<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>

总结

相同点:都保存在浏览器端,可以下图位置查看储存的信息

JavaScript本地储存:localStorage、sessionStorage、cookie的使用

不同点:

①传递方式不同

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本地储存内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
node.js基础知识汇总
Aug 25 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
原生JS实现相邻月份日历
Oct 13 #Javascript
jquery简易手风琴插件的封装
Oct 13 #jQuery
原生js实现照片墙效果
Oct 13 #Javascript
js轮播图之旋转木马效果
Oct 13 #Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 #Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 #Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 #Javascript
You might like
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
JSON语法五大要素图文介绍
2012/12/04 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python的print用法示例
2014/02/11 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
一个入门级python爬虫教程详解
2021/01/27 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
师范应届生教师求职信
2013/11/05 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
团购业务员岗位职责
2014/03/15 职场文书
社区食品安全实施方案
2014/03/28 职场文书
个人考核材料
2014/05/15 职场文书
软件售后服务方案
2014/05/29 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
兵马俑的导游词
2015/02/02 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL