前端技术之缓存localstorage,sessionstorage,cookies

本文主要是介绍前端技术之缓存localstorage,sessionstorage,cookies,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、.HTML的存储-cookies

在HTML5出生之前,通常在浏览器(客户端)使用cookies来存储客户端的内容;cookies的特点:

每次的http请求头中,都会带有cookies——缺点; 每个域名只能存储4K大小的cookies; 主域名污染:如果我们使用cookies存储主域名的东西,那么子域名下得Http请求都会带上主域名的东西;如果关联上网络,那么将带来安全问题。所以,通常我们会使用cookies用在如购物车、身份验证等问题上。

1.写cookie

Cookie theCookie = new Cookie(“username” , “Tom”);
response.addCookie(theCookie)

2.读取cooklie

Cookie[] cookies = request.getCookies();
HttpServletRequest类的getCookies()方法返回一个Cookie数组,它包含了HTTP请求中的所有Cookie。如果在HTTP请求中没有任何Cookie,那么getCookies()方法返回null。
对于每个Cookie对象,可调用getName()方法来获得Cookie的名字,调用getValue()方法来获得Cookie的值。
例如:
Cookie[] cookies = req.getCookies();if(cookies != null){for(int i = 0 ; i < cookies.length ; i++){out.println("Cookie name:" + cookies[i].getName());out.println("Cookie value:" + cookies[i].getValue());out.println("Cookie maxAge:" + cookies[i].getMaxAge());}}else{out.println("No cookie.");}

3.修改cookie

if(cookie==null){//,如果不存在cookie=new Cookie("username" , "Tom");//写入一个新的Cookie:“username=Tom"cookie.setMaxAge(60*60);//设置有效期为1小时res.addCookie(cookie);}else if(cookie.getValue().equals("Tom")){//如果存在且值为Tomcookie.setValue("Jack");//将值改为Jackres.addCookie(cookie);}else if(cookie.getValue().equals("Jack")){//如果存在且值为Jackcookie.setMaxAge(0);//删除改cookie
res.addCookie(cookie);}

二、html5的缓存: localstorage,sessionstorage 

1.localstorage:永久存储,永不失效,除非手动删除 
sessionstorage:重新打开页面,或是关闭浏览器,sessionstorage才会消失;

2.存储形式:key–>value

3.getItem:获取localstorage\sessionstorage setItem:设置localstorage\sessionstorage removeItem:移除localstorage\sessionstorage key:获取某一个位置上的key值,按值从0开始索引; clear:全部清除localstorage\sessionstorage

4.例如:一个选了下次登录之后,缓存用户名和密码

var storage = window.localStorage;  var getname = storage["name"];   var getPwd = storage["pwd"];  

//存储到loaclStage  
 storage["name"] = userAccout;  storage["pwd"] =  userPassWord; 
//lacoste  已经保存 登陆信息 直接登陆  $("#loginAccout").val(getname);  $("#loginPwd").val(getPwd);  
















这篇关于前端技术之缓存localstorage,sessionstorage,cookies的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/801382

相关文章

Redis缓存问题与缓存更新机制详解

《Redis缓存问题与缓存更新机制详解》本文主要介绍了缓存问题及其解决方案,包括缓存穿透、缓存击穿、缓存雪崩等问题的成因以及相应的预防和解决方法,同时,还详细探讨了缓存更新机制,包括不同情况下的缓存更... 目录一、缓存问题1.1 缓存穿透1.1.1 问题来源1.1.2 解决方案1.2 缓存击穿1.2.1

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

Redis与缓存解读

《Redis与缓存解读》文章介绍了Redis作为缓存层的优势和缺点,并分析了六种缓存更新策略,包括超时剔除、先删缓存再更新数据库、旁路缓存、先更新数据库再删缓存、先更新数据库再更新缓存、读写穿透和异步... 目录缓存缓存优缺点缓存更新策略超时剔除先删缓存再更新数据库旁路缓存(先更新数据库,再删缓存)先更新数

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

SpringBoot使用注解集成Redis缓存的示例代码

《SpringBoot使用注解集成Redis缓存的示例代码》:本文主要介绍在SpringBoot中使用注解集成Redis缓存的步骤,包括添加依赖、创建相关配置类、需要缓存数据的类(Tes... 目录一、创建 Caching 配置类二、创建需要缓存数据的类三、测试方法Spring Boot 熟悉后,集成一个外

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Spring Cache时设置缓存键的注意事项详解

《使用SpringCache时设置缓存键的注意事项详解》在现代的Web应用中,缓存是提高系统性能和响应速度的重要手段之一,Spring框架提供了强大的缓存支持,通过​​@Cacheable​​、​​... 目录引言1. 缓存键的基本概念2. 默认缓存键生成器3. 自定义缓存键3.1 使用​​@Cacheab

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE