原生js cookie本地存储

简介: 原生js cookie本地存储

JS cookie

1、概述


cookie也叫HTTP Cookie,最初是客户端与服务器端进行会话(Session)使用的。

如果没写expires,那么下次打开网页,cookie就会消失,这个就是会话机制

2、格式


name=value; [expires=date]; [path=path]; [domain=somewhere.com];

[secure]

encodeURIComponent函数可以:将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件

上面的方法主要用于协议、主机名、路径或查询字符串

3、封装函数


设置cookie


function setCookie(name,value,day,path){
  var cookieText=encodeURIComponent(name)+"="+encodeURIComponent(value);    //encodeURIComponent
  if(day>0){
    var myDate=new Date();
    myDate.setDate(myDate.getDate()+day);
    cookieText+=";expires="+myDate;
  }
  if(path){
    cookieText+=";path="+path;
  }
  document.cookie=cookieText;
}


获取cookie


function getCookie(name){
  var i=document.cookie.indexOf(name);
  if(i!=-1){
    var start=i+name.length+1;
    var end=document.cookie.indexOf(";",i);
    if(end==-1){
      end=document.cookie.length;
    }
    return document.cookie.substring(start,end);
  }
}


删除cookie


function removeCookie(name){
  var i=document.cookie.indexOf(name);
  if(i!=-1){
    var start=i+name.length+1;
    var end=document.cookie.indexOf(";",i);
    if(end==-1){
      end=document.cookie.length;
    }
    let val=document.cookie.substring(start,end);
  }
  if(val!=undefined){
    document.cookie=name+"="+val+";expires="+new Date(0);
  }
}


cookie的特性

cookie自身局限性


条数上的限制,最多20条

大小上的限制,最多4k(4096字节)

cookie安全性较低,不能存放敏感数据

带宽的浪费

Cookie 通过在客户端记录信息确定用户身份, Session 通过在服务器端记录信息确定用户身份。

cookie 与 session 的区别


cookie 数据存放在客户的浏览器上,session 数据放在服务器上


考虑到安全应当使用 session


session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用COOKIE。


相关文章
|
3月前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
145 0
|
4月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
57 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
3月前
|
存储 JavaScript 前端开发
JavaScript Cookie
JavaScript Cookie
26 0
|
5月前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
90 9
|
5月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
48 0
|
5月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
48 0
|
5月前
|
存储 JavaScript 前端开发
JavaScript 本地存储
JavaScript 本地存储
41 0
|
5月前
|
存储 JavaScript
js之本地存储
js之本地存储
50 0
|
6月前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
280 0
|
6月前
|
存储 Web App开发 移动开发
js【详解】本地存储 Cookie、sessionStorage、localStorage
js【详解】本地存储 Cookie、sessionStorage、localStorage
184 0