html cookie与LocalStorage

html cookie与LocalStorage

1. cookie的设置和读取
   
   • js操作
   • java后台设置
2. LocalStorage存储数据

1.1 js 操作cookie

1. 设置cookie
   cookie 是以键值对的形式保存数据在浏览器上，js使用document.cookie设置, 一次只能设置一个键值对

   document.cookie = "name=admin;max-age=" + 60;

   这句话保存了key为name, value为admin的数据，有效时间为60秒。

2. 读取cookie
   document.cookie 可以查看全部的cookie
   要读取保存的单个cookie还需要进行处理：
   将全部cookie字符串分割成数组，再查找key，然后截取value
   
//分割符是 分号加空格
var cookies = document.cookie.split("; ");
var key = "name=";
var value = null;
for (let i = 0; i < cookies.length; i++) {
if (cookies[i].indexOf(key) > 0) {
//这里的value 为 admin
value = cookies[i].substring(key.length, cookies[i].length);
}
}


3. 删除cookie
   将cookie的时间重新设置为负数即可

4. 浏览器查看cookie
   这里使用google浏览器

   • 查看网站信息
     

   • 打开开发者工具
     

1.2 java操作cookie

1. 设置cookie
   使用javax.servlet.http.Cookie对象
   
Cookie cookie = new Cookie("name", "admin");
//设置只能服务器读取
cookie.setHttpOnly(true);
//以秒为单位
cookie.setMaxAge(60);
cookie.setPath("/");
httpServletResponse.addCookie(cookie);

   • 设置为HttpOnly是为了防止js读取cookie的值

2. 读取cookie
   Cookie[] reqCookie = httpServletRequest.getCookies();
for(Cookie c : reqCookie) {
System.out.println(c.getName() + ":" + c.getValue());
}

   • 服务器通过request对象获取cookie数组

2. LocalStorage存取数据

1. 添加、读取数据
   

2. 查看数据
   

3. 删除、清除
   removeItem只删除对应的key，
   clear则清除所有
   

4. 有效期
   只要不清除数据，理论上一直有效，可以写js方法这是有效期