本地存储——Cookie与Web Storage

luckyw

Cookie


cookie是客户端用来存储数据的,它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送

Web Storage


html5标准中的Web Storage包括了两种存储方式:sessionStoragelocalStorage
sessionStorage用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage仅仅是会话级别的存储
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的

区别


Web StorageCookie相似都是客户端用来存储数据的,区别是它是为了更大容量存储设计的
Cookie的大小是受限的,最多只能存储4KB的数据;并且每次你请求一个新的页面的时候,Cookie都会被发送过去,这样无形中浪费了带宽;再有就是不安全,很容易被拦截者截取进行篡改
Web Storage拥有setItemgetItemremoveItemclear等方法,不像cookie需要自己封装setCookiegetCookie等方法
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地存储数据而生

操作方法


  1. setItem

    sessionStorage.setItem("name","leoyaojy");
    localStorage.setItem("website","luckyw.cn");
  2. getItem

    sessionStorage.getItem("name");        //leoyaojy
    localStorage.getItem("website");    //luckyw.cn
  3. removeItem

    sessionStorage.removeItem("name");
    localStorage.removeItem("website");
  4. clear

    sessionStorage.clear();
    localStorage.clear();
  5. 其他操作方法:点操作[]

    sessionStorage.name = "leoyaojy";
    console.log(sessionStorage["name"]);
    
    localStorage["website"] = "luckyw.cn";
    console.log(localStorage.website);
  6. key()length遍历数据

    for (var i=0, len = localStorage.length; i<len; i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        console.log(key + "=" + value);
    }
阅读 2.1k

luckyw
博客文章
677 声望
0 粉丝
0 条评论
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs30阅读 2.9k评论 3

还在用定时器吗?借助 CSS 来监听事件
平时工作中很多场合都要用到定时器,比如延迟加载、定时查询等等,但定时器的控制有时候会有些许麻烦,比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法,一起了解一下吧,相信...

XboxYan29阅读 2k评论 2

封面图
如何优雅地中断 Promise?来试试 AbortController 吧!
欢迎大家来到 前端小课堂 的第五期,今天我们来聊一聊如何终止正在进行中的 Fetch 以及 Promise。文中会跟大家详细介绍这里面的两个关键知识点 AbortController 和 AbortSignal。对动手实践比较感兴趣的同学还可...

dreamapplehappy23阅读 2.8k评论 4

封面图
前端性能优化(图文并茂,通俗易懂)
默认情况下,我们静态导入的所有模块都会添加到初始捆绑包中。使用默认 ES2015 导入语法 导入的模块将静态导入。import module from 'module'

寒水寺一禅26阅读 2.8k评论 1

超强的苹果官网滚动文字特效实现
每年的苹果新产品发布,其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思,今年 iPhone 14 Pro 的介绍页不例外。最近,刚好有朋友问到,其对官网的一段文字特效特别感兴趣,看适用简单却...

chokcoco24阅读 1.6k

封面图
50天用vue3完成了50个web项目,我学到了什么?
通过本文的50个web示例你将学到:Vue3核心基础语法和进阶语法less核心基础语法和进阶语法scss核心基础语法和进阶语法1.Expanding Cards效果如图所示:源码在线示例学到了什么?JavascriptVue ref方法定义基本响应式...

夕水21阅读 2k

封面图
一个被忽略的前端细分领域
大家好,我卡颂。回想下你学新技术的主要途径是什么?看书?看技术文档?看博文?看视频?归纳起来,无外乎文字、视频两种形式。从纸媒时代到互联网时代,再到移动互联网时代,虽然信息的载体发生变化,但信息的...

卡颂18阅读 1.4k

封面图
677 声望
33 粉丝
宣传栏