JS中的存储方式（Cookie，localStorage，sessionStorage）

最新推荐文章于 2025-04-30 14:58:50 发布

azkhx

最新推荐文章于 2025-04-30 14:58:50 发布

阅读量910

点赞数 5

CC 4.0 BY-SA版权

文章标签： javascript 开发语言

本文链接：https://blog.youkuaiyun.com/azkhx/article/details/132685817

本文介绍了JavaScript中的cookie封装方法，以及如何使用JSON处理复杂数据并存储在cookie中。同时对比了cookie的局限性，重点讲解了HTML5新增的localStorage和sessionStorage，包括其优势、使用方法和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cookie

cookie的封装:

// 设置cookie
 function setCookie(name, value, time){
    if(time){
        let d = new Date()
        d.setDate(d.getDate()+time)
        d = d.toUTCString()
        document.cookie = `${name}=${value};expires=${d}`
    }else{
        document.cookie = `${name}=${value}`
    }
}

// 读取cookie
function getCookie(name){
    let obj = {}
    let arr = document.cookie.split('; ')
    // 遍历数组
    arr.forEach(item=>{
        let newArr = item.split('=')
        obj[newArr[0]] = newArr[1]
    })
    return obj[name]
}

// 删除cookie
function delCookie(name){
    setCookie(name, '', -1)
}

json与Cookie

回顾

json的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
字符串必须使用双引号表示，不能使用单引号。
对象的键名必须放在双引号里面。

JSON.stringify方法用于将一个值转为 JSON 字符串。
JSON.stringify([1,2,3]);
JSON.stringify({ name: "张三" })// '{"name":"张三"}'

JSON.parse方法用于将 JSON 字符串转换成对应的值。
var o = JSON.parse('{"name": "张三"}');

引用

我们可以把js中的对象，转为字符串，存贮在cookie中，从而来存贮复杂的数据

var userObj = {name:"张三",age:18}
var jsonStr = JSON.stringify(userobj);
setCookie('userinfo',jsonStr,7)//把用户的信息存储在cookie中
var arr = [
{name:"张1",age:18},
{name:"张2",age:18},
{name:"张3",age:18}
]
var jsonStr = JSON.stringify(arr);
setCookie('users',jsonStr,7)//把多个账户息存储在cookie中

Cookie缺点

cookie可能被禁用；
cookie与浏览器相关，不能互相访问；
cookie可能被用户删除；
cookie安全性不够高；
cookie存储空间很小(只有4–10KB左右)

H5新增存储方式

localStorage

概念

什么是localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k).

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

特点

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、 localStorage本质上是对字符串的读取，有json格式时需要JSON.stringify()转化为字符串。

3、localStorage在浏览器的隐私模式下面是不可读取的,localStorage不能被爬虫抓取到.

代码的实现

检测浏览器是否支持

首先在使用localStorage的时候，我们需要判断浏览器是否支持localStorage这个属性

if(!window.localStorage){
	alert("浏览器支持localstorage");
}else{
	//主逻辑业务
}

增删改查

存储数据

localStorage.setItem(key,value);

取数据

localStorage.getItem(key）;

删除数据

localStorage.removeItem(key);

localStorage.clear() 删除所有

sessionStorage

用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

保存数据语法：

sessionStorage.setItem("key", "value");

读取数据语法：

var lastname = sessionStorage.getItem("key");

删除指定键的数据语法：

sessionStorage.removeItem("key");

删除所有数据：

sessionStorage.clear();