获取localstorage（如何读取HTML5 local storage 的值）

本文目录

• 如何读取HTML5 local storage 的值
• html怎么取localstorage中的key值
• 解决WebView写入localstorage但首次加载取不到值的问题
• php能获取localstorage吗

如何读取HTML5 local storage 的值

在HTML 5中，localstorage是个不错的东西，在支持localstorage的浏览器中， 能持久化用户表单的输入，即使关掉浏览器，下次重新打开浏览器访问，也能读出其值， 下面给出的例子是使用jquery 在每次表单加载的时候，读localstorage的值，而在表单每次提交时则清楚其值的例子 首先是一个表单： 复制代码 代码如下: 《!DOCTYPE html》 《html lang="en"》 《head》 《meta charset="utf-8"》 《title》HTML5 Local Storage Example《/title》 《!-- include Bootstrap CSS for layout --》 《link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"》 《/head》 《body》 《div class="container"》 《h1》HTML5 Local Storage Example《/h1》 《form method="post" class="form-horizontal"》 《fieldset》 《legend》Enquiry Form《/legend》 《div class="control-group"》 《label class="control-label" for="type"》Type of enquiry《/label》 《div class="controls"》 《select name="type" id="type"》 《option value=""》Please select《/option》 《option value="general"》General《/option》 《option value="sales"》Sales《/option》 《option value="support"》Support《/option》 《/select》 《/div》 《/div》 《div class="control-group"》 《label class="control-label" for="name"》Name《/label》 《div class="controls"》 《input class="input-xlarge" type="text" name="name" id="name" value="" maxlength="50"》 《/div》 《/div》 《div class="control-group"》 《label class="control-label" for="email"》Email Address《/label》 《div class="controls"》 《input class="input-xlarge" type="text" name="email" id="email" value="" maxlength="150"》 《/div》 《/div》 《div class="control-group"》 《label class="control-label" for="message"》Message《/label》 《div class="controls"》 《textarea class="input-xlarge" name="message" id="message"》《/textarea》 《/div》 《/div》 《div class="control-group"》 《div class="controls"》 《label class="checkbox"》 《input name="subscribe" id="subscribe" type="checkbox"》 Subscribe to our newsletter 《/label》 《/div》 《/div》 《/fieldset》 《div class="form-actions"》 《input type="submit" name="submit" id="submit" value="Send" class="btn btn-primary"》 《/div》 《/form》 《/div》然后是js部分代码： 复制代码 代码如下: 《script src="//code.jquery.com/jquery-latest.js"》《/script》 《script》 $(document).ready(function () { /* * 判断是否支持localstorage */ if (localStorage) { /* * 读出localstorage中的值 */ if (localStorage.type) { $("#type").find("option").attr("selected", true); } if (localStorage.name) { $("#name").val(localStorage.name); } if (localStorage.email) { $("#email").val(localStorage.email); } if (localStorage.message) { $("#message").val(localStorage.message); } if (localStorage.subscribe === "checked") { $("#subscribe").attr("checked", "checked"); } /* * 当表单中的值改变时,localstorage的值也改变 */ $("input,select,textarea").change(function(){ $this = $(this); localStorage = $this.val(); }); $("input").change(function(){ $this = $(this); localStorage = $this.attr("checked"); }); $("form") /* * 如果表单提交，则调用clear方法 */ .submit(function(){ localStorage.clear(); }) .change(function(){ console.log(localStorage); }); } });

html怎么取localstorage中的key值

//取localStorage中的所有的键(Key)for(var i=0;i《localStorage.length;i++){      console.log(localStorage.key(i))}//取localStorage中的所有的值(Value)for(var i=0;i《localStorage.length;i++){      console.log(localStorage.getItem(localStorage.key(i)))}

解决WebView写入localstorage但首次加载取不到值的问题

本文虽然写的是解决Android写localstorage的问题，但是对于iOS同样适用。

在android中，native经常需要和h5页面进行交互，比如将本地token写入h5，然后h5中的js获取token进行api请求。

写入localstorage的方法很标准，即在webview的onPageFinished中注入并调用一段js即可。

但是这样做有个问题，就是token注入是在页面加载完毕之后进行，而页面加载完毕，页面中的js也就基本执行完毕了，所以页面中原有的js执行获取token是获取不到的。

一种解决方法就是在h5内判断token是否为空，如果是则重新刷新页面。因为token为空是在首次加载页面时发生的，所以也只有在首次加载页面时会重新刷新，只有首次加载页面成功，写入localstorage，后面获取localstorage都不会失败了。

还有一种方法就是 在登录或者注册成功后***隐藏网址***

php能获取localstorage吗

能获取到LocalStorage 本地存储这么大的东西像cookie那样每次都传服务端，不科学。只有js能调用到，如果想php调用，就用cookie吧，跳转前用js把localstorage数据存入cookie