存储

lucky_cxmei
96 阅读3分钟

本地存储

  • 本地存储特性

    1. 数据存储在用户浏览器中。
    2. 设置、读取方便，刷新页面存储的数据不会丢失。
    3. 容量较大，sessionStorege约5M，localstorege约20M（对于存储字符算大）。
    4. 只能存储字符串。

sessionStorege

说明：

  1. sessionStorege的生命周期为浏览器窗口的生命周期，只要关闭浏览器就销毁。
  2. sessionStorege存储大小约为5M。
  3. 在同一个页面下数据可以共享。
  4. 以键值对的形式存储使用。

使用方法

  1. 存储数据：setItem(key,value)

    sessionStorege.setItem("users", JSON.stringify(oUserList))

  2. 获取数据：getItem(key)

    JSON.parse(sessionStorege.getItem("users"))

  3. 删除数据：removeItem(key)

    sessionStorege.removeItem("users")

  4. 删除所有存储的数据：clear()

    sessionStorege.clear()

localStorege

说明

  1. 生命周期永久生效，关闭页面也还会存在 ，除非手动删除。
  2. 可以多页面共享数据（需要同浏览器）。
  3. 以键值对的方式存储使用。

使用

  • localStorege的方法和使用跟sessionStorege基本一致。

两者的使用选择

  • 可以考虑生命周期和是否需要多页面共享，来对两者进行选择使用。

cookie

  • 概念： cookie 也叫 HTTPCookie，是客户端与服务器端进行会话(session)使用的一个能够在浏览器本地化存储的技术。

  • cookie就是为了存储 sessionID而诞生

  • cookie的特性

    1. 基于http协议，解决http协议的无状态
    2. 会随着请求携带到服务器
    3. 存储的大小为4K左右的字符串
    4. 不是永久存储，能设置失效时间
    5. 不安全，容易被伪造，key-value对象模式

  • 为什么要有cookie？

    • 因为http协议是无状态的（对事物没有记忆能力），为了解决这个问题，服务器就会生成sessionId(一串字符串)，通过http协议响应给浏览器，浏览器就需要存储，存储在cookie，存储方式 key-value对象，cookie有个最大的特点，会随着请求携带到服务器

cookie的格式

  • cookie由键值对形式的文本组成：name=value。

  • 完整格式为：name=value;[expires=date];[path=路径];[domain=域名];[secure]

    • 其中中括号[]表示该值是可选。
    • name=value: 为你要保存的键值对(必选)
    • expires=date: 表示cookie的失效时间, 默认是浏览器关闭时失效(可选)
    • path=路径: 访问路径, 默认为当前文件所在目录(可选)
    • domain=域名: 访问域名, 限制在该域名下访问(可选)
    • secure: 安全设置, 如果设置了则必须使用https协议才可获取cookie(可选)

本地写法

  1. 获取和设置：cookie.document

    //设置cookie和获取cookie
document.cookie = "user="+"张三"; //设置
console.log(document.cookie);  //获取

//URI编码后设置cookie, 和URI解码后获取cookie
document.cookie = "user2=" + encodeURIComponent("张三");
console.log(decodeURIComponent(document.cookie));
    • 第一次在浏览器中运行
      image.png
    • 刷新浏览器后 image.png

  2. expires=失效时间，默认是浏览器关闭的时候，可以手动设置

// 可以自己设置cookie的失效时间。 如设置7天后再删除cookie
var date = newDate();  
date.setDate(date.getDate() +7); 
document.cookie = “user=张三;expires=” + date;

// 主动删除cookie
// 失效时间设置在现在时间或现在之前的时间即可删除指定cookie
// name值为指定要删除的那个cookie
var date = new Date()-1;
document.cookie = “user=张三;expires=” + date;

第三方插件写法

<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.js"></script>

  1. 获取

    Cookies.get("users")

  2. 设置

     Cookies.set("users",JSON.stringify(oList))

  3. 设置失效时间

    Cookies.set("users",JSON.stringify(aList),{
    expires:4
})

  4. 删除

    Cookies.remove("users")
avatar
文章
阅读
粉丝