cookie、sessionStorage和localStorage的使用

最新推荐文章于 2023-02-14 11:05:04 发布

原创最新推荐文章于 2023-02-14 11:05:04 发布 · 324 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

前端专栏收录该内容

7 篇文章

订阅专栏

cookie

cookie 存储于浏览器中，每次浏览器向服务器发送请求之前都需要携带cookie，一般情况下，cookie产生于服务器端，保存在客户端的。

cookie的特点：

数据持久，在浏览器关闭时才删除
不需要任何的服务器资源，cookie是存储在客户端并发送给服务器读取
可配置到期，控制cookie的生命周期，使之不会长期有效

我们也可以通过js来产生并操作cookie

<!-- 首先引入cookie -->
  <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>
    //创建一个cookie，七天后失效
    cookie = Cookies.set('username','Brycee',{expires:7});
    // 读取
    var name = Cookies.get('username');
    console.log(name);
    // 移除cookie
    Cookies.remove('username');

sessionStorage

会话存储

页面会话在浏览器打开会一直保持，并且重新加载或恢复页面仍会保持原来的页面会话

打开多个相同的URL的标签页，会创建各自的sessionStorage

关闭会话，会清除对应的sessionStorage

<script>
    //创建sessionStorage
    sessionStorage.setItem('person', JSON.stringify({
      name:'Bry',
      age:19
    }));
    //获取
    sessionStorage.getItem('person');
    //移除
    sessionStorage.removeItem('person');
    //清空
    sessionStorage.clear();
  </script>

localStorage

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除

存储的数据大约为5M，突破cookie的4k的限制，并且将请求的数据储存在本地可以节约带宽，但也存在缺点，在不同的浏览器中，标准不同。目前所有的浏览器中都会把localStorage的值类型限定为String类型，要使用JSON对象类型则需要一些转换。localStorage在浏览器的隐私模式下面是不可读取的。

<script>
    // 创建
    localStorage.setItem('username','zhangsan');
    // 读取
    localStorage.getItem('username');
    // 移除
    localStorage.removeItem('username');
    // 清空
    localStorage.clear();
  </script>