前端本地存储

最新推荐文章于 2024-10-15 15:24:52 发布

烟猫

最新推荐文章于 2024-10-15 15:24:52 发布

阅读量115

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_49569512/article/details/120768188

版权

本地存储特性

数据存储在拥护浏览器中
这只读取方便，刷新页面不丢失
容量较大，sessionStorage 约5M localStorage约20M
只能存储字符串，可以用对象JSON.stringify() 编码后存储

window.sessionStorage

生命周期为关闭浏览器
在同一个页面下数据可以共享
以键值对的形式存储
使用
//存储 = 修改 重新赋值
sessionStorage.setItem(key,value)
//获取 通过key获取value
sessionStorage.getItem(key)
//删除
sessionStorage.removeItem(ky)
//清空（慎用）
sessionStorage.clear()

window.localStorage

生命周期永久生效，除非主动删除
可以多界面共享
以键值对的形式存储数据
//存储
localStorage.setItem(key,value)
//获取
localStroage.getItem(key,value)
//删除
localStorage.removeItem(keyy)
//清楚所有数据
localStorage.clear()

说明

HTTP Cookie，最初用于在客户端存储会话信息。该标准要求服务器对任意 HTTP 请求发送 Set-Cookie HTTP 头作为响应的一部分，其中包含会话信息。浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加 Cookie HTTP 头将信息发送回服务器。

一般用于保存登录信息

设置cookie
//cookie只有在服务环境下才能设置
<script>
  document.cookie = 'name = zhangsan'
</script>

//在没有设置到期时间时默认 浏览会话结束时

<script>

  //将此时间转为毫秒数
  var data = new Date().getTime()

  //将时间设置为 x时 后  这里设置为7天后
  var newdta = new Date(data + 7*24*60*60*100)

  //设置到期时间 toUTCString() 是将时间转为字符串
  document.cookie = 'name = zhangsan;'+'expires = ' + newdta.toUTCString()

</script>

ps: 如果需要设置多条cookie 则需要一条一条设置

查看/获取cookie

console.log(document.cookie)
```

4. 删除cookie 
   
   设置cookie是设置了一个cookie值并给它一个过期时间，这样 cookie才不会因为关闭浏览器而立马失效。所以删除 cookie 我们只需要给该cookie设置一个比现在时间还早的时间让cookie过期。

```javascript
<script>
    let data = new Date().getTime()   //先将此时的时间转化为毫秒
    let old_data = new Date(data - 24*60*60*1000) //将过期时间设为24小时前
    document.cookie = 'name=张三;' + 'expires=' + old_data.toUTCString()
</script>

```

cookie 部分可以看这个博主零一写的十分的详细
原文链接：https://blog.csdn.net/l_ppp/article/details/106363568