最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
HTML5 web storage, a better local storage method than cookie. Use HTML5 to store users’ browsing data locally. Earlier, local storage used cookie. But Web storage needs to be more secure and fast. This data will not be saved on the server, but it will only be used on the website data requested by the user. It can also store a large amount of data without affecting the performance of the site. The data exists as a key / value pair, and the data of the web page is only allowed to be accessed by that page. Internet Explorer 8, Firefox, Opera, Chrome, and Safari support Web storage. Note: Internet Explorer 7 and earlier IE versions do not support web storage. The two objects on which the client stores data are: Before using web storage, you should check whether the browser supports Instance resolution: Use Retrieve the value with the key value “sitename” and insert the data into the element of id= “result”. The above example can also be written as follows: Remove Whether it is Save data: Reading data: Delete individual data: Delete all data: Get the key for a certain index: Tip: key / value pairs are usually stored as strings, and you can convert this format as needed. The following example shows the number of times a user clicks a button. The string values in the code are converted to numeric types: How to create and access a The website listing program implements the following functions: You can enter the website name and URL, and use the website name as the key to save it to ‘localStorage’; Find the URL according to the name of the website List all currently saved websites The following code is used to save and find data: The complete example is shown as follows: And then we use JavaScript implementation code: A complete example is as follows: In the instance The output shows: 11.44.1. What is HTML5 Web storage? ¶
11.44.2. Browser support ¶
11.44.3. LocalStorage and sessionStorage ¶
localStorage -it is used to save the data of the entire website for a long time, and the saved data does not expire until it is manually removed. sessionStorage -used to temporarily save data from the same window (or tab), which will be deleted after the window or tab is closed. localStorage and sessionStorage :if(typeof(Storage)!=="undefined"){//Yes! support localStorage
sessionStorage Object// Some code.....}else{//Sorry! Web storage not supported.}
11.44.4.
localStorage object ¶ localStorage There is no time limit for the data stored in the. After the next day, the second week, or the next year, the data is still available.Example ¶
//save localStorage.setItem("sitename","Rookie Tutorial");//check document.getElementById("result").innerHTML="Website Name："+localStorage.getItem("sitename");
key="sitename" and value="Rookie Tutorial" Create a `` localStorage``key / value pair.//save localStorage.sitename="Rookie Tutorial";//check document.getElementById("result").innerHTML=localStorage.sitename;
localStorage in “sitename” :localStorage.removeItem("sitename");
localStorage , or sessionStorage the API that can be used is the same, and the following are commonly used (take localStorage as an example): localStorage.setItem(key,value) ; localStorage.getItem(key) ; localStorage.removeItem(key) ; localStorage.clear() ; localStorage.key(index) ;Example ¶
if(localStorage.clickcount){localStorage.clickcount=Number(localStorage.clickcount)+1;}else{localStorage.clickcount=1;}document.getElementById("result").innerHTML="You have already clicked the button"+localStorage.clickcount+"times";
11.44.5. SessionStorage object ¶
sessionStorage method is targeted at a session for data storage. When the user closes the browser window, the data is deleted. sessionStorage :Example ¶
if(sessionStorage.clickcount){sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;}else{sessionStorage.clickcount=1;}document.getElementById("result").innerHTML="You have already clicked the button in this conversation"+sessionStorage.clickcount+"times";
11.44.6. Web Storage develops a simple website listing program ¶
save() and find() method ¶ //Save Data functionsave(){varsiteurl=document.getElementById("siteurl").value;varsitename=document.getElementById("sitename").value;localStorage.setItem(sitename,siteurl);alert("Added successfully");}//lookup functionfind(){varsearch_site=document.getElementById("search_site").value;varsitename=localStorage.getItem(search_site);varfind_result=document.getElementById("find_result");find_result.innerHTML=search_site+"The website address is："+sitename;}
Example ¶
<p>
Screenshot of the implementation effect:
</p>
<p>
<a class="reference internal" href="/media/sphinx_tuto/img/local11.png">
<img alt="Image5" src="/media/sphinx_tuto/img/local11.png" style="width: 50.0%;"/>
</a>
</p>
<p>
The above example only demonstrates a simple
<code class="docutils literal notranslate">
<span class="pre">
localStorage
</span>
</code>
storage and search, in more cases, the data we store will be more complex.
</p>
<p>
Next we will use the
<code class="docutils literal notranslate">
<span class="pre">
JSON.stringify
</span>
</code>
to store object data
<code class="docutils literal notranslate">
<span class="pre">
JSON.stringify
</span>
</code>
you can convert an object to a string.
</p>
<div class="highlight-default notranslate">
<div class="highlight">
<pre><span></span><span class="n">varsite</span><span class="o">=</span><span class="n">newObject</span><span class="p">;</span> <span class="o">...</span><span class="n">varstr</span><span class="o">=</span><span class="n">JSON</span><span class="o">.</span><span class="n">stringify</span><span class="p">(</span><span class="n">site</span><span class="p">);</span><span class="o">//</span><span class="n">Convert</span> <span class="n">objects</span> <span class="n">to</span> <span class="n">strings</span>
JSON.parse method to convert a string to a JSON object: varsite=JSON.parse(str);
save() and find() method ¶ //Save data functionsave(){varsite=newObject;site.keyname=document.getElementById("keyname").value;site.sitename=document.getElementById("sitename").value;site.siteurl=document.getElementById("siteurl").value;varstr=JSON.stringify(site);//Convert objects to strings localStorage.setItem(site.keyname,str);alert("Successfully saved");}//lookup functionfind(){varsearch_site=document.getElementById("search_site").value;varstr=localStorage.getItem(search_site);varfind_result=document.getElementById("find_result");varsite=JSON.parse(str);find_result.innerHTML=search_site+"The website name is:"+site.sitename+"，The website is:"+site.siteurl;}
Example ¶
loadAll after outputting all the stored data, you need to make sure localStorage the stored data is in JSON format, otherwise``JSON.parse(str)`` will report an error. 