春风得意马蹄疾
一日看尽长安花

cookie与localStorage本地存储

HTTP协议

http:超文本传输协议https:超文本传输安全协议
http协议的一个特点是无状态,同一个客户端的这次请求和上次请求没有对应关系。对http服务器来说,它并不知道这两个请求来自同一个客户端。为了解决这个问题, Web程序引入了cookie机制来维护状态。

cookie是什么

cookie是浏览器提供的一种机制,可以由JavaScript对其进行操作(设置、读取、删除)

cookie是一种会话跟踪技术,是    存储于访问者计算机中的一小块数据

会话:用户进入网站,开始浏览信息到关闭浏览器的过程,就称之为是一次会话

会话跟踪技术:浏览器和服务器之间在进行多次请求间共享数据的过程,就称为会话跟踪技术

cookie的特性(服务器环境运行)

  • cookie可以实现跨页面全局变量
  • cookie可以跨越同域名下的多个网页,但不能跨域使用
  • cookie会随着HTTP请求发送给服务器
  • cookie会存储于访问者的计算机中
  • 同一个网站中所有页面共享一套cookie
  • 可以设置有效期限
  • 存储空间为4KB左右

cookie应用场景

  • 会话状态管理(如用户登录状态、购物车等)
  • 个性化设置(保存用户设置的样式等)
  • 浏览器行为跟踪(如跟踪分析用户行为等)

cookie的缺点

  1. cookie可能被禁用
  2. cookie与浏览器相关,不能互相访问
  3. cookie可能被用户删除
  4. cookie安全性不够高
  5. cookie会随着HTTP请求发送给服务器
  6. cookie存储空间很小(只有4KB左右)
  7. cookie操作麻烦,没有方便的API

操作cookie

每个cookie都是一个键/值对格式的字符串(key=value)

设置cookie:

document.cookie="user1=xh";
document.cookie="user2=xm";

如果要改变一个cookie的值,只能重新赋值

设置有效期:

var d=new Date();
d.setDate(d.getDate()+3); //按天数设置
document.cookie="user3=xd; expires="+d;
  • domain=域名;  默认为当前域名
  • path=目录;  默认当前目录

读取cookie:

var cookies = document.cookie;

  • 只能够一次获取所有的cookie值
  • 使用时必须自己解析这个字符串,来获取指定的cookie值
  • 使用 escape()  编码
  • 使用 unescape()  解码

删除cookie:

cookie过期会自动消失

要删除一个cookie,可将其有效期设为一个过去的时间

var d=new Date();
d.setDate(d.getDate()-1);
document.cookie="user1=xh; expires="+d;

HTML5本地存储

H5本地存储有 localStorage 与 sessionStorage 两种

优点:

  • 更大的存储空间,有5MB左右
  • 不会随HTTP请求发送给服务器
  • 有方便的API操作
  • 移动端普及高

兼容情况:

  • localStorage 为永久性保存数据,不会随着浏览器的关闭而消失。
  • 按域名进行存储,可以在同域名下跨页面访问,不会和其他域名冲突。
  • 按键值对存储:key/value

操作:

localStorage.setItem(key , value) 保存或设置数据

  • 如果key已经存在,则覆盖key对应的value
  • 如果不存在则添加key与value

localStorage.getItem(key) 获取key对应的value

如果key不存在则返回null

localStorage.key(index) 获取指定下标位置的key,不存在返回null

localStorage.length 获取数据条数(长度)

配合key(index)方法可以实现遍历localStorage数据的方法

localStorage.clear() 将同域名下的所有数据都清空

localStorage.removeItem('key') 删除某个键值对

sessionStorage 为临时性保存数据,当页面关闭就会消失

sessionStorage 不能跨页面访问,只局限在当前的标签页

sessionStorage 各种操作与 localStorage 一样

JSON

  • 目前 JavaScript 使用非常多的 json 格式
  • 可以使用 JSON.stringify() 将 json对象 转为 json字符串然后把 json字符串 存储在 cookie 或 localStorage 里面
  • 读取出来以后使用 JSON.parse() 将 json字符串 转为 json对象

示例:

  • var jsonObj = {"name1":"jack","name2":"lily"};
  • localStorage.setItem("user",JSON.stringify(jsonObj)); // 存储
  • var jsonObj = JSON.parse(localStorage.getItem("user")); // 读取
Like
Like Love Haha Wow Sad Angry
赞(0) 打赏
未经允许不得转载:栗子纪blog » cookie与localStorage本地存储
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x