存储---cookie&localStorage&sessionStorage

最新推荐文章于 2023-07-18 21:03:06 发布

童童童ing

最新推荐文章于 2023-07-18 21:03:06 发布

阅读量81

点赞数

文章标签： javascript 前端开发语言 html

本文链接：https://blog.csdn.net/weixin_64804275/article/details/124968883

版权

存储---cookie&localStorage&sessionStorage

cookie
本地存储
- 1.window.localStorage----本地存储
- 2.window.sessionStorage---会话存储

cookie

1.cookie的构成

名称：一个唯一确定cookie的名称
值：储存在cookie中的字符串值
路径：指定域中的指定路径
域：cookie对于哪个域是有效的
失效时间：cookie何时应该被删除的时间戳
安全标志：指定后，cookie只有在使用SSL连接时才发送到服务器（设置secure标志）

cookie的限制

绑定在特地域名下，无法跨域
浏览器对cookie数量的限制规定不同
所有cookie的累加长度限制为4KB,超长会被忽略

js中的cookie

document.cookie
1.获取：f返回当前页面可用的所有cookiede字符串，由分号和空格隔开的一系列名值对。
2.添加cookie

cookie的值必须写成key=value的形式，且等号两边不能有空格
一次只能写入一个cookie，并且写入不是覆盖，而是添加
写入时必须对分号、逗号和空格进行转义
3.cookie的属性
value ：必填项，用于指定cookie的值
expires：指定cookie的过期时间
domain：指定cookie所在域名
path:指定路径，必须是绝对路径
secure：指定cookie只能在加密协议https下发送到服务器
httpOnly：设置cookie不能被JS获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cookie</title>
</head>
<body>
    
</body>
<script>
    var exp = new Date();
    exp.setTime(exp.getTime() + 100000);
    // 添加一些东西
    document.cookie = 'name=zxy;expires=' + exp.toGMTString();
    document.cookie = 'age=18;expires=' + exp.toGMTString();

    console.log('cookie ==== ' + document.cookie);
</script>
</html>

本地存储

1.window.localStorage----本地存储

存储的数据没有过期时间
各浏览器支持的localStorage容量上限不同

语法：myStorage=localStorage;返回一个Storage对象
添加：localStorage.setItem(‘key’,‘value’);
获取：localStorage.getItem(‘key’);
移除：localStorage.removeItem(‘key’);
清空：localStorage.clear();不接收参数，清空储存对象里所有的数据

2.window.sessionStorage—会话存储

存储的数据会在浏览器会话结束时被清除（即浏览器关闭时）
各浏览器支持的localStorage容量上限不同

语法：myStorage=sessionStorage;返回一个Storage对象
添加：sessionStorage.setItem(‘key’,‘value’);
获取：sessionStorage.getItem(''key);
移除：sessionStorage.clear();不接收参数，清空存储对象里所有的数据


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>storage</title>
</head>
<body>
    localStorage         本地存储
    sessionStorage      会话存储
</body>
<script>
    // localStorage.setItem('author', '李白');
    // localStorage.setItem('shi', '大鹏一日乘风起');
    // localStorage.shi2 = '桃花潭水深千尺，不及汪伦送我情';

    // localStorage.clear();

    // console.log(localStorage);

    // 如何实现跨页面传值
    // 1. a标签 或者 location.href
    // 2. 存储(cookie,localStorage,sessionStorage)

    // cookie,localStorage,sessionStorage的区别
    // 1. cookie
    // 存储量小受到限制，
    // 设置过期时间删除，
    // 前后端自动同步
    // 2. localStorage
    // 存储量大，
    // 需手动删除
    // 3. sessionStorage
    // 临时存储，关闭浏览器自动清除
</script>
</html>