原生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。


相关文章
|
1月前
|
JavaScript 算法 数据安全/隐私保护
原生JS实现:密码输入框显示隐藏密码效果
原生JS实现:密码输入框显示隐藏密码效果
|
1月前
|
存储 Web App开发 JSON
存储界的cookie、本地存储、会话存储
存储界的cookie、本地存储、会话存储
|
3天前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
9 0
|
4天前
|
存储 JavaScript 前端开发
原生JS如何实现验证码
原生JS如何实现验证码
10 0
|
4天前
|
JavaScript 安全 前端开发
原生JS实现一键复制,一键粘贴
原生JS实现一键复制,一键粘贴
11 0
|
12天前
|
存储
12.9JavaScript 本地存储
12.9JavaScript 本地存储
|
13天前
|
存储 JavaScript 前端开发
javascript本地存储(简介)
javascript本地存储(简介)
|
13天前
|
前端开发 JavaScript 调度
原生JavaScript实现弹幕组件
原生JavaScript实现弹幕组件
|
16天前
|
JavaScript 前端开发
js原生自调用函数原理
JavaScript中的IIFE(Immediately Invoked Function Expression)是定义后立即执行的函数表达式。它有两种实现方式:匿名函数表达式 `(function() { /* 函数体 */ })()` 和命名函数声明 `(function myFunction() { /* 函数体 */ })()`。IIFE提供封闭作用域,防止变量冲突,常用于创建私有作用域、封装代码和避免变量提升问题。执行后,IIFE内部的变量和函数会被销毁,除非被特意暴露。
|
16天前
|
存储 JavaScript 前端开发
js原生方法,获取url上面所有参数,并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。