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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
js 颜色选择插件
Jan 23 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
原生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
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
Django实现自定义404,500页面教程
2017/03/26 Python
Python分析学校四六级过关情况
2017/11/22 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
致长跑运动员广播稿
2014/01/31 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
实习介绍信模板
2015/01/30 职场文书
暖春观后感
2015/06/08 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
JavaScript的Set数据结构详解
2022/02/18 Javascript