cookies、sessionStorage和localStorage解释及区别

localStorage

localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
// 1、保存数据到本地
 
// 第一个参数是保存的变量名,第二个是赋给变量的值
 
localStorage.setItem('Author', 'local');
 
// 2、从本地存储获取数据
 
localStorage.getItem('Author');
 
// 3、从本地存储删除某个已保存的数据
 
localStorage.removeItem('Author');
 
// 4、清除所有保存的数据
 
localStorage.clear();

image

sessionStorage

sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
// 1、保存数据到本地
 
// 第一个参数是保存的变量名,第二个是赋给变量的值
 
sessionStorage.setItem('Author', 'session');
 
// 2、从本地存储获取数据
 
sessionStorage.getItem('Author');
 
// 3、从本地存储删除某个已保存的数据
 
sessionStorage.removeItem('Author');
 
// 4、清除所有保存的数据
 
sessionStorage.clear();

image

复杂数据存储

上面都是对于简单的数据类型的存储,但当要存储的数据是一个对象或是数组的时候,直接存储是不行的

错误的存储:

var user = {
 
username: 'liu',
 
password: '123456'
 
};
 
sessionStorage.setItem('user', user);
 
console.log(sessionStorage.getItem('user'));

image
这个时候,就需要转换数据格式。

存储数据前:利用JSON.stringify将对象转换成字符串

获取数据后:利用JSON.parse将字符串转换成对象

var user = {
 
username: 'liu',
 
password: '123456'
 
};
 
user = JSON.stringify(user);
 
sessionStorage.setItem('user', user);
 
var account = sessionStorage.getItem('user');
 
console.log(account);
 
account = JSON.parse(account)
 
console.log(account);

image

cookie的保存与获取

cookie机制:如果不在浏览器中设置过期事件,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期事件,cookie会被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期事件结束才消失。cookie是服务端发给客户端的特殊信息,cookie是以文本的方式保存在客户端,每次请求时都带上它
image
  • 保存用户登录状态
  • 跟踪用户行为
  • 定制页面
  • 创建购物车:使用cookie来记录用户需要购买的商品,再结帐的时候可以统一提交。(淘宝网就是使用cookie记录了用户曾经浏览过的商品,方便随时进行比较)
// 1、保存数据到本地

    // 第一个参数是保存的变量名,第二个是赋给变量的值

    //保存cookie

    //参数:cookie名,cookie值,有效时长(单位:天)

    function saveCookie(cookieName, cookieValue, cookieDates) {

        var d = new Date();

        d.setDate(d.getDate() + cookieDates);

        document.cookie = cookieName + "=" + cookieValue + ";expires=" + d.toGMTString();

    }

cookie的获取

 function getCookie(cookieName) {

        var cookieStr = unescape(document.cookie);

        var arr = cookieStr.split("; ");

        var cookieValue = "";

        for (var i = 0; i < arr.length; i++) {

            var temp = arr[i].split("=");

            if (temp[0] == cookieName) {

                cookieValue = temp[1];

                break;

            }

        }

        return cookieValue;

    }

cookie的删除

 //删除cookie

    function removeCookie(cookieName) {

        document.cookie = encodeURIComponent(cookieName) +“=; expires =” + new Date();

    }

cookie缺点:

  1. 大小受限
  2. 用户可以操作(禁用)cookie,使功能受限
  3. 安全性较低
  4. 有些状态不可能保存在客户端。
  5. 每次访问都要传送cookie给服务器,浪费带宽。
  6. cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。
29 声望
0 粉丝
0 条评论
推荐阅读
对React Hooks的一些思考
在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并...

lucky_qi阅读 908

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木149阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.4k评论 6

29 声望
0 粉丝
宣传栏