cookie 和 localStorage储存
1.cookie
浏览器提供的一个公共存储空间,要运行执行cookie 必须要通过 服务器
// 设定 cookie 的固定语法
document.cookie = '键名=键值;path=路径;expires=时效' ;
- 设定cookie函数
// 封装函数
function mySetCookie( key , value , path , second ){
// 创建一个时间对象
const time = new Date() ;
// 将 新的时间戳 设定给时间对象
time.setTime( time.getTime() + second*1000 - 8*60*60*1000 );
// 设定cookie的固定语法
document.cookie = `${key}=${value};path=${path};expires=${ second === undefined ? '' : time }` ;
}
// 调用
mySetCookie( 'sex' , '男' , '/' , 10 );
- 获取cookie函数
// 封装函数
function myGetCookie(){
const cookieObj = { } ;
let cookieStr = document.cookie ;
const arr1 = cookieStr.split( '; ' );
arr1.forEach( item => {
const arr2 = item.split('=') ;
cookieObj[ arr2[0] ] = arr2[1];
})
return cookieObj
}
// 调用
const obj = myGetCookie();
console.log( obj );
2. localStorage
是 浏览器提供的 本地存储 功能 可以本地运行
// 设定 localStorage
// 使用 JavaScript定义的 localStorage 函数方法
window.localStorage.setItem( 'name' , '张三' );
// 使用 对象支持的语法形式
window.localStorage.phone = 123456 ;
window.localStorage.email = '123@qq.com' ;
// 获取 localStorage
// 使用 JavaScript定义的 localStorage 函数方法
let res1 = window.localStorage.getItem( 'name' );
console.log( res1 );
// 使用 对象支持的语法形式
let res2 = window.localStorage.age ;
console.log( res2 );
// 删除 localStorage 删除一个
// 使用 JavaScript定义的 localStorage 函数方法
window.localStorage.removeItem( 'name' );
// 使用 对象支持的语法形式
delete( window.localStorage.addr );
// 清除所有存储的localStorage
window.localStorage.clear();
// localStorage 存储 json字符串
const arr = [
{id:1 , name:'张三' , age:18 , sex:'男' , addr:'北京'},
{id:2 , name:'李四' , age:19 , sex:'女' , addr:'上海'},
{id:3 , name:'王五' , age:20 , sex:'男' , addr:'广州'},
{id:4 , name:'赵六' , age:21 , sex:'女' , addr:'重庆'},
{id:5 , name:'刘七' , age:22 , sex:'保密' , addr:'天津'},
];
// 将数组转化为 json字符串 存储到 localStorage 中
window.localStorage.student = JSON.stringify( arr ) ;
- 两者的区别
/*
window.localStorage 和 cookie 的区别
1, cookie的执行 必须要通过服务器
localStorage的执行 本地运行就可以
2, cookie 有 时效性 超过时效自动删除
localStorage 没有 时效性 除非执行删除操作才能删除
3, cookie 有 路径 符合路径的文件才能访问
localStorage 路径不能修改 默认设定是 根目录路径
4, cookie 只能 存储 普通字符串 不能存储 对象 数组 函数 json字符串
localStorage 可以 存储 json字符串
也就是 localStorage 可以将 数组对象 转化为 json字符串 存储
5, cookie 一般存储数据量都比较小 一般浏览器存储4k
localStorage 一般存储数据量都比较大 一般浏览器存储4M
6, cookie 前端程序 后端程序都能操作
localStorage 只能 JavaScript操作
7, cookie 一般 存储 简单的数据片段
localStorage 一般存储复杂数据的json字符串
cookie 和 localStorage 都是 本地存储数据
数据的安全性都比较低 不会存储 敏感数据
*/
