本地存储cookie,localStorage和sessionStorage

news/2024/5/18 15:05:04 标签: cookie

cookielocalStoragesessionStorage_0">cookie,localStorage和sessionStorage之间的区别是什么?

  • cookie:操作麻烦,需要大量的字符串处理。兼容性好,数据的生命周期可以灵活地设置。
  • localStorage:相对于cookie来说兼容性稍差。数据的生命周期是永久性存储。
  • sessionStorage:数据生命周期在会话期(在当前标签页中),其余的所有特性都类似于localStorage的。

localStorage(永久存储)

  • 设置 localStorage.setItem(key,value) 写入
  • 获取 localStorage.getItem(key)
  • 删除 localStorage.removeItem(key)
  • 全部清空 localStorage.clear()
  • 返回有几条数据 localStorage.length ()

sessionStorage

  • 写入 sessionStorage.setItem(key,value)
  • 获取 sessionStorage.getItem(key)
  • 删除 sessionStorage.removeItem(key)
  • 清空 sessionStorage.clear()
  • 返回有几条数据 sessionStorage…length

cookie_17">cookie原生封装

let cookie = {
    // 写入/修改cookie
    set(key, value, expires) {
        if (typeof expires === "number") {
            let date = new Date();
            date.setDate(date.getDate() + expires)
            document.cookie = `${key}=${value};expires=${date}`;
        } else {
            let d = new Date(expires);
            document.cookie = `${key}=${value};expires=${d}`;
            //  }
        }
    },
    // 读取cookie
    get(key) {
        let arr = document.cookie.split("; ")
        var result = {}
        arr.forEach(item => {
            let key = item.split("=")[0];
            let value = item.split("=")[1];
            result[key] = value;
        })
        return key ? result[key] : result;
    },
    // 删除cookie
    remove(key) {
        if (this.get(key)) {
            document.cookie = key + "=18;expires=" + new Date('1999-09-09');
            return true;
        } else {
            return false;
        }
    }
}
//使用时直接调用
// 示例
//cookie.set("username",$("#username").value,30)

http://www.niftyadmin.cn/n/1162248.html

相关文章

JavaScript学习(四)代码风格

代码风格 语法 Figure brackets(大括号) 总结 对于很短的代码,一行是可以接受的:例如 if (cond) return null.但是括号中的每个语句单独一行通常更好些。函数在代码下面 好的注释 描述架构 提供组件的一个高层次的概况&#…

JavaScript学习(五)对象 基础知识

对象 对象可以通过花括号 {…} 和其中包含一些可选的属性来创建。属性是一个键值对,键是一个字符串(也叫做属性名),值可以是任何类型。 我们可以把对象想象成存放文件的橱柜。文件按照他们的名字来排列。这样根据文件名我们就很…

P2-21js-ajax

AJAX铺垫 协议名,主机名,端口号 http://www.baidu.com:80 协议名://主机名(域名或IP地址):端口号 当在浏览器上输入完地址后到看到页面这中间网络上都发生了些什么 DNS解析(将域名转换为IP地址的过程)向服务器发送一次HTTP请求&#xff…

JavaScript学习(六)数据类型

基本类型的方法 基本类型 是原始类型中的一种值。在 JavaScript 中有 6 种基本类型:string、number、boolean、symbol、null 和 undefined。 对象类型 能够存储多个值作为属性。可以使用大括号 {} 创建对象,例如:{name: "John",…

P2-22js-Mysql,SQL语句,json,php

Mysql 介绍数据库 关系型:mysql sqlserver Oracle(面向企业,且收费–容灾性强)非关系型:mongodb 数据库的结构关系 库>表>字段(列)>数据(行)注意点:utf8数据库中表的设计原则 1.任何表都应该有一个id字段&#xff0c…

System-design-primer 学习笔记(一) 引论

学习如何设计大型系统 学习如何设计可扩展的系统将会有助于你成为一个更好的工程师。 系统设计是一个很宽泛的话题。在互联网上,关于系统设计原则的资源也是多如牛毛。System-design-primer 这个仓库它可以帮助你学习如何构建可扩展的系统。 如何处理一个系统设计…

P2-23js-同源组,跨域,jsonp

浏览器的 同源组策略 浏览器安全防护的一种机制,它规定:Ajax请求地址与当前页面的地址必须得是同协议,同主机,同端口才可以正常发送Ajax请求,这三者有任何一个不一样,则判定此次请求是跨域请求&#xff0c…

GitHub开源项目学习 电商系统Mall (一) Mall简介

Mall项目链接 https://github.com/macrozheng/mall 学习了解之后感觉比本人的DuDuMall强大太多,决定好好学习理解 mall项目简介 mall项目是一套电商系统,包括前台商城系统及后台管理系统,基于SpringBootMyBatis实现。 前台商城系统包含首页…